miracle2k miracle2k - 7 months ago 25
CSS Question

CSS: container with max-height, after that, a child div should start to scroll

I have a modal window that should be a small as possible, extend to 70% of the height. After that, the content of the modal (but not the modal itself) should start to scroll. I can't make this work.

My HTML looks like this:

<div class="dialog">
<div class="ui-root" >
<div class="title" />
<div class="body" />
<div class="buttons" />

This is the CSS idea:

.dialog { max-height: 70% }
.ui-root { display: flex }
.body { flex: 1; overflow: scroll }

In words:

  • If the body content is small, the height of .body can be the content height.

  • If the body content is large, then .body starts to flex until it extends beyond the max-height of .dialog. Now it starts to scroll.

The problem:

  • The max-height value is ignored.

Play with it:



The way I ultimate solved this for myself was to enforce a strict and particular usage of flexbox within my dialog.

In turns out that if <dialog> has max-height and also display: flex, and the child elements are also display: flex, then the height calculation works exactly as expected.