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;
}