flexbox misbehaving with max-height

Question

My issue is probably best explained by example. This following jsfiddle will work in Chrome:

http://jsfiddle.net/ga6g4/

As you can see, I\'ve got a fixed-hei

Answer 1

I think the answer is that you are using flex-direction:column.

Although it's still not entirely clear to me what you are trying to achieve switching to flex-direction:row seems to have the right effect.

JSfiddle Demo

CSS

.lhs {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 250px;
    max-height: 100px;
    border: 1px solid red;
    display: flex;
    flex-direction: row;
}

.panel-container {
    flex: 1;
    overflow: auto;
}

Answer 2

OK, here's the solution I ended up with if anyone is interested:

http://jsfiddle.net/vN65r/

Basically, I had to apply the following to the fixed-height header:

flex: 0 0 auto;

And the following to the variable-height, scrolling body:

flex: 0 1 auto;

I hope it helps somebody

Answer 3

Barguast's answer is a good one. Here is a simplified version using Bootstrap:

<div class="h-50 border border-danger">
    <div class="d-flex flex-column h-100">
        <header>Header</header>
        <div class="flex-shrink-1" style="overflow-y: auto;">
            <ul>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
                <li>Item</li>
            </ul>
        </div>
        <footer>Footer</footer>
    </div>
</div>

The trick to it is the flex-shrink-1, paired with overflow-y: auto.

Answer 4

Giving it both max-height:100px; and height:100%; should work. http://jsfiddle.net/ga6g4/2/