html – 如何让元素扩展直到其容器到达边界(使用flex布局)？

2023年10月23日 197次阅读

(跟进
this question及其有用的答案)

我正在尝试创建带有页眉和页脚的容器,以及可以根据需要增长/缩小的主要内容区域.没有提前知道尺寸.应该允许整个物体垂直生长,直到容器达到使用最大高度的设定极限.

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

这可以用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：property中尝试了各种值,包括0％,100％或main-size作为flex-basis,但无法得到我正在寻找的结果.

最佳答案 看起来你没有正确使用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; }
点赞