My issue is probably best explained by example. This following jsfiddle will work in Chrome:
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;
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.
See Question&Answers more detail:os