我正在使用flexbox布局将三个div定位在一列中，以便每个div具有相同的高度。如果每个div的内容太大，则会显示滚动条。我希望每一节只扩展到其内容的高度，但目前发生的情况是，每一节总是相同的高度，而不管其中的内容如何。

如果容器是900px，则每个节应该是300px，如果一个节的内容超过300px高，则应该出现滚动条。但是，如果lets的内容说中间的部分只有100px高，那部分应该只有100px，其余的部分应该填满剩余的空间，所以它们每个都是400px高。

示例:http://jsfidle.net/x6puccbh/2/

正如您在本例中所看到的，中间部分与其他部分的高度相同，但我希望它只与其内容一样高。使用flex布局是否可以做到这一点？

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