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?
Dimi
CodePen
qBJmKKN
...
2 Replies
Kevin Powell
Kevin Powell14mo ago
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 behaviors
john_galt
john_galt14mo ago
Thanks, Kevin for the great explanation!