Let's assume having the following HTML:
<div class="main"><div class="header">Header</div><div class="middle"><div class="inner"><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p></div></div></div>Let's assume having the following CSS:
.main { border: 1px solid blue; height: 300px; display: flex; flex-direction: column;}.header { background-color: red;}.middle { display: flex; flex-direction: column; flex: 1;}.inner { flex: 1; overflow-y: auto;}How to achieve that the .inner element actually scrolls?
Note, that everything is working as expected with this structure:
<div class="main"><div class="inner"><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p></div></div>Introducing an additional nesting level does not work anymore, see:
<div class="main"><div class="middle"><div class="inner"><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p><p>Lorem Ipsum</p></div></div></div>Setting max-height to .middle would be a solution for this problem, but as soon as the element .header is added this can't be used. It would use to much space.
Any idea how this can be achieved? I somehow struggle with the understanding how an element can be restrained in height without using height: 100% or max-height: 100%. I always thought flexbox can be used for this. Am I wrong?
Any help appreciated.