My issue is probably best explained by example. This following jsfiddle will work in Chrome:
.lhs {
position: absolute;
top: 8px;
left: 8px;
width: 250px;
height: 100px;
border: 1px solid red;
display: flex;
flex-direction: column;
}
.panel-container {
flex: 1;
overflow: auto;
}
<div class="lhs">
<header>Header</header>
<div class="panel-container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
As you can see, I've got a fixed-height flexbox with a fixed header and a scrollable body. So far so good. However, if you change the 'height' CSS of the '.lhs' container to max-height:
max-height: 100px;
.lhs {
position: absolute;
top: 8px;
left: 8px;
width: 250px;
max-height: 100px;
border: 1px solid red;
display: flex;
flex-direction: column;
}
.panel-container {
flex: 1;
overflow: auto;
}
<div class="lhs">
<header>Header</header>
<div class="panel-container">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
It breaks. It seems to now think that my list is now zero-height! Any idea why this is doing what it is doing, and how I can fix it?
EDIT: I wasn't descriptive enough in my original post in how I want this to behave. Basically the outer should use only the minimum height it requires, but only up to a maximum (defined by max-height). At this point, I want the content to begin scrolling.