Why doesn't overflow: hidden work with div

Question

I don't why I set overflow: hidden, my div is still scrollable. Pls tell me why

.myDiv {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
}

Adding html structure

  <div className="myDiv">
     <div className='imgBx'>
        {/* img content inside */}
     </div>
     <div className='post'>
        {/* post content inside */}
     </div>
  </div>

Sometimes, you need to make sure that the parent element is not being scrolled. You need to provide some HTML structure so others can understand the hierarchy correctly. Also [this](https://stackoverflow.com/questions/3970455/how-to-make-the-overflow-css-property-work-with-hidden-as-value) might help you. — akaAbdullahMateen, Jul 18 '22 at 04:24
Please provide a snippet we can run. You can pick up the actual HTML and CSS from browser dev tools inspect facility. — A Haworth, Jul 18 '22 at 05:55
Ah, you’ve only given it a min height so all the content will be shown. It’ll be some parent (possibly body) that is being scrolled. — A Haworth, Jul 18 '22 at 05:57
Even if I change the height to some specific px, it doesn't matter — Zombani, Jul 18 '22 at 06:08

score 1 · Accepted Answer · answered Jul 18 '22 at 04:29

1

You can overflow: hidden !important; for avoid other ovverriden styles

.myDiv {
    position: relative;
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    overflow: hidden !important;
}

answered Jul 18 '22 at 04:29

Codenatial Developer

328
1
4
11

I've tried but it still doesn't work – Zombani Jul 18 '22 at 04:45
also add height or width to .imgBx and .post class – Codenatial Developer Jul 18 '22 at 10:17
if you want to stop scroll for inner div then you have to add on overflow: hidden !important; .imgBx and .post class – Codenatial Developer Jul 18 '22 at 10:19
Is it necessary to set height for imgBx and post, I always set min-height: 300px – Zombani Jul 18 '22 at 10:23
if .imgBx and .post are scrollable, then you must have to set Height & width – Codenatial Developer Jul 18 '22 at 10:26
It's kind of hard for me to set the specific height of them because they can be added to some divs when the user use it – Zombani Jul 18 '22 at 10:27
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/246537/discussion-between-codenatial-developer-and-zombani). – Codenatial Developer Jul 18 '22 at 12:41

score 0 · Answer 2 · answered Jul 18 '22 at 04:22

0

For allowing scroll bar. These two CSS properties can be used to hide the scrollbars:

overflow-y: hidden; // hide vertical
overflow-x: hidden; // hide horizontal

answered Jul 18 '22 at 04:22

Muhammad Angga Oktaharisetia

29
5

2

`overflow: hidden` is equivalent to this. So for the same reason, the OP's code does not hide scrollbars, yours won't either. – akaAbdullahMateen Jul 18 '22 at 04:25

Why doesn't overflow: hidden work with div

2 Answers2