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

Posted 2023-03-07

【中文标题】如何让元素扩展直到其容器到达边界（使用 flex 布局）？

【英文标题】：How to let an element expand until its container reaches a boundary (with flex layout)?

【发布时间】：2014-09-26 03:56:49

【问题描述】：

（跟进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% 或 main-size 作为 flex-basis，但无法获得我想要的结果。

【参考方案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; 

【讨论】：

请原谅我迟来的反应，我正在度假。我同意我可能没有正确使用 flexbox，但是您的示例并不能完全解决问题。当包含多行时，页眉/页脚区域会被挤压：jsfiddle.net/7RB2h/2