Flex items expanding to content height - html

Question

I am using flexbox layout to position three divs in a column so that each div has the same height. Each div displays a scrollbar if its content is too large. I would like each section to only expand to the height of its content, but currently what happens is that every section is always the same height regardless of the content in it.
If the container is 900px, each section should be 300px, and if the content of a section is more than 300px tall, a scroll bar should appear. However, if the content of lets say the middle section is only 100px tall, that section should only be 100px, and the remaining sections should fill in the remaining space, so they would each be 400px tall.
Example: http://jsfiddle.net/x6puccbh/2/
As you can see in this example, the middle section is the same height as the other sections, but I would like it to only be as tall as its content. Is this possible using flex layout?
<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%;
}

Answer 1

If you change your heights to auto I think it does what you are asking. Example and current code below. Let me know if that's not what you were going for
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;
}

Answer 2

Try setting a max-height property on the container you don't want to get too big but use a vh rather than a % (as in 75vh not 75%).