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 might help you. — akaAbdullahMateen
– akaAbdullahMateen, Commented Jul 18, 2022 at 4: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
– A Haworth, Commented Jul 18, 2022 at 5: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
– A Haworth, Commented Jul 18, 2022 at 5:57

ViMee Developer · Accepted Answer · 2022-07-18 04:29:36Z

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, 2022 at 4:29

ViMee Developer

3181 gold badge5 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Zombani Over a year ago

I've tried but it still doesn't work

ViMee Developer Over a year ago

also add height or width to .imgBx and .post class

ViMee Developer Over a year ago

if you want to stop scroll for inner div then you have to add on overflow: hidden !important; .imgBx and .post class

Zombani Over a year ago

Is it necessary to set height for imgBx and post, I always set min-height: 300px

ViMee Developer Over a year ago

if .imgBx and .post are scrollable, then you must have to set Height & width

|

Muhammad Angga Oktaharisetia · Accepted Answer · 2022-07-18 04:22:30Z

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, 2022 at 4:22

Muhammad Angga Oktaharisetia

235 bronze badges

1 Comment

akaAbdullahMateen Over a year ago

overflow: hidden is equivalent to this. So for the same reason, the OP's code does not hide scrollbars, yours won't either.

Collectives™ on Stack Overflow

Why doesn't overflow: hidden work with div

2 Answers 2

7 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Linked

Related