Note: I am observing some unusual behavior on Chrome 72. FireFox 64 seems to be working fine!
I am experiencing an issue with a nested flexbox.
In the code snippet below, I have added an artificial XL height to .root.container in order to achieve the desired outcome when there are multiple items overflowing the available max-height.
However, in cases where there are only a few items, the .root.container should not extend to occupy all available height.
In simple terms, I would like the height of .root.container to be set as auto, but I can't seem to figure out how to do it.
When I remove the dummy height, the overflow occurs in .root.content instead of .sub.content.
I would greatly appreciate any assistance in understanding how the flexbox behaves in this specific scenario.
P.S. You can also access the fiddle here
html, body {
height: 100%;
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
div {
padding: 10px;
}
.container {
display: flex;
flex-direction: column;
}
.content {
flex: 1;
max-height: 100%;
overflow: auto;
}
.root.container {
background-color: red;
max-height: 100%;
height: 999999px; /* i want height to be 'auto' */
}
.sub.container {
background-color: purple;
height: 100%;
}
.root.header {
background-color: lightblue;
}
.sub.header {
background-color: lightgreen;
}
.root.content {
background-color: yellow;
}
.sub.content {
background-color: orange;
}<div class="root container">
<div class="root header">header</div>
<div class="root content">
<div class="sub container">
<div class="sub header">menu</div>
<div class="sub content">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
...
<li>Item 5</li>
</ul>
</div>
</div>
</div>
</div>