Html 如何让元素展开直到其容器到达边界（使用flex布局）？

（后续行动及其有益的回答）

我正在尝试创建一个带有页眉和页脚的容器，以及一个可以根据需要增长/收缩的主内容区域。事先不知道尺寸。应该允许整个容器垂直增长，直到容器达到使用

max height

设置的限制

理想情况下，页眉和页脚高度永远不会改变；文章的增长仅限于显示其内容所需的高度，但受其容器大小的限制

这可以只用CSS实现吗

屏幕截图

演示

• 使用固定大小的容器：
• 同上，交互式：
• 使用

  最大高度

  而不是

  高度

  的损坏版本：

HTML

<div>
    <header>header 1<br>header 2<br>header 3</header>
    <article>content 1<br>content 2<br>content 3 ...</article>
    <footer>footer 1<br>footer 2<br>footer 3</footer>
</div>

---

我在

flex:

属性中尝试了各种值，包括0%、100%或主大小作为flex基准，但无法得到我想要的结果。

看起来您的flexbox使用不正确：

---

请原谅我反应晚了，我在度假。我同意我可能没有正确使用flexbox，但您的示例并没有完全解决问题。页眉/页脚区域包含多行时会被压扁：

div {
    display: flex;
    flex-flow: column;
    max-height: 300px; /* this makes the article content disappear */
}
article {
    flex: 2;
    overflow: auto;
    background: gold;
}

div {
    display: flex;
    flex-direction: column; /* We set the direction as column */
    width: 300px;
    max-height: 300px; /* The max height you require */
}
article {
    flex-grow: 1; /* Article will then become flex */
    overflow: auto;
    background: gold;
}

/* (colors, not important) */
div { background: #eee; }
header { background: tomato; }
article { background: gold; }
footer { background: lightgreen; }