How to solve max-height and flex-column issue?

Question

css

Hello connoisseurs! )

https://codepen.io/northfire/pen/xxPZQOw

The main parent can and will overflow. It needs to have a max-height , but at the same time, when the overflow starts, it should appear in .content - scroll. Currently it only works when the parent has a fixed height . Are there any ideas how to keep the "rubbery" in height, but at the same time, when overflowing, what would be the scroll?

PS> the issue has been resolved for grids (thanks for the solution!). but you can use flex (there is a small bug in ff) https://codepen.io/northfire/pen/xxPZQOw

Answer 1

So what's the attack?
No need to do this with absolutes
https://qna.habr.com/q/1107394
https://qna.habr.com/q/1102624

Answer 2

You either have to set the height anyway , or use position: relative and position:absolute for the respective blocks.
Because in the current case, the height of the outer block, i.e. .test is calculated from its content, so setting the height to % for its child blocks will not work - it will automatically be considered as height: auto .

Answer 3

Not so long ago, I came across a rather interesting and non-obvious method for solving a similar issue