Flex 项目扩展到内容高度

Question

我正在使用 flexbox 布局在一列中放置三个 div，以便每个 div 具有相同的高度。如果内容太大，每个 div 都会显示一个滚动条。我希望每个部分只扩展到其内容的高度，但目前发生的情况是，无论其中的内容如何，​​每个部分始终是相同的高度。

如果容器是900px，每个section应该是300px，如果一个section的内容超过300px高，应该会出现一个滚动条。但是，如果假设中间部分的内容只有 100px 高，那么该部分应该只有 100px，其余部分应该填充剩余空间，因此它们每个都是 400px 高。

示例：http://jsfiddle.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%;
}

Answer 1

如果您将高度更改为自动，我认为它可以满足您的要求。下面的示例和当前代码。如果这不是你想要的，请告诉我

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

尝试在您不想变得太大但使用 vh 而不是 % 的容器上设置 max-height 属性（如 75vh 而不是 75%）。