Itens flexíveis que se expandem para a altura do conteúdo - html, css, css3, flexbox

Eu estou usando o layout flexbox para posicionar três divsem uma coluna para que cada div tenha a mesma altura. Cada div exibe uma barra de rolagem se seu conteúdo for muito grande. Gostaria que cada seção fosse expandida apenas até a altura de seu conteúdo, mas atualmente o que acontece é que cada seção tem sempre a mesma altura, independentemente do conteúdo nela.

Se o contêiner for 900px, cada seção deve ser300px, e se o conteúdo de uma seção for maior que 300px, uma barra de rolagem deverá aparecer. No entanto, se o conteúdo de digamos que a seção do meio tem apenas 100px de altura, essa seção deve ter apenas 100px, e as seções restantes devem preencher o espaço restante, para que cada uma tenha 400px de altura.

Exemplo: http://jsfiddle.net/x6puccbh/2/

Como você pode ver neste exemplo, a seção do meio tem a mesma altura das outras seções, mas eu gostaria que ele fosse tão alto quanto seu conteúdo. Isso é possível usando o layout flexível?

<div class="container">
<div class="panel">
<div class="section">
<div class="header">HEADER</div>
<div class="content">content<br>content<br>content<br>content
<br>content<br>content<br>content<br>content
<br>content<br>content<br>content<br>content</div>
</div>
<div class="section">
<div class="header">HEADER</div>
<div class="content">content</div>
</div>
<div class="section">
<div class="header">HEADER</div>
<div class="content">content<br>content<br>content<br>content
<br>content<br>content<br>content<br>content
<br>content<br>content<br>content<br>content
</div>
</div>
</div>
</div>

.container {
height: 300px;
}

.panel {
display:flex;
flex-direction: column;
height: 100%;
}

.header {
height: 15px;
text-align: center;
flex-shrink: 0;
}

.section {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
height: 100%;
border: 1px solid red;
display: flex;
flex-direction: column;
}

.content {
overflow-y: auto;
height: 100%;
}

Respostas:

Se você mudar suas alturas para auto, acho que faz o que você está pedindo. Exemplo e código atual abaixo. Deixe-me saber se isso não é o que você estava indo para

http://plnkr.co/edit/MMjXmANacvZvHofXzYoL

    .container {
height: 300px;
}

.panel {
max-height: 100%;
display:flex;
flex-direction: column;
}

.header {
height: 15px;
text-align: center;
flex-shrink: 0;
}

.section {
border: 1px solid red;
display: flex;
flex-direction: column;
max-height: 33%;
flex-grow: 1;
}

.content {
overflow-y: auto;
}

Tente definir uma propriedade max-height no contêiner que você não quer ficar muito grande, mas use um vh em vez de um% (como em 75vh e não em 75%).