Why div around flex-container breaks overflow scrolling?
I'm trying to make the flex-item be scrollable, but when adding wrapper div around flex-container the scroll is break and the entire page is scolling instead of content in flex-item
Example without div wrapping flex-container:
https://codepen.io/Dimi_0-o/pen/qBJmKKN
If uncomment
div around .container, then html start to overflowing instead of flex-item
Why is this happening? What css spec/mdn part of CSS can I read to understand that behavior?2 Replies
Because of how
height: 100% works.
As soon as you add that extra <div>, the height: 100% is no longer doing anything on .container.
For height to work as a percentage, the parent has to have an explicitly defined height itself.
If that wasn't the case, you could end up with recursive behaviorsThanks, Kevin for the great explanation!