flexbox misbehaving with max-height

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

http://jsfiddle.net/ga6g4/

.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>

http://jsfiddle.net/ga6g4/1/

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.