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

Question

（跟进this question及其有用的答案）

我尝试创建带有页眉和页脚的容器，以及可以根据需要增长/缩小的主要内容区域。没有提前知道尺寸。应该允许整个事物垂直增长，直到容器使用max-height达到设定的限制。

理想情况下，页眉和页脚高度永远不会改变;文章的增长速度只有展示其内容所需的高度，但受到容器大小的限制。

只能用CSS实现吗？

截图

演示

• 使用固定容器尺寸：Fiddle
• 与上述相同，互动：Fiddle
• 使用max-height代替height而不是Fiddle
的版本

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>

CSS

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

我已尝试flex:属性中的各种值，包括0％，100％或主要大小作为弹性基础，但无法得到结果I＆＃39;我正在寻找。

Answer 1

看起来你没有正确使用flexbox：

http://jsfiddle.net/7RB2h/1/

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