如何让元素扩展，直到它的容器到达边界（使用flex布局）？ [英] How to let an element expand until its container reaches a boundary (with flex layout)?

问题描述

（跟进

与上述相同：小提琴

使用 max-height 而不是高度：小提琴

HTML

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

CSS

  div {
 display：flex; 
 flex-flow：column; 
 max-height：300px; / *这使得文章内容消失* / 
} 
 article {
 flex：2; 
 overflow：auto; 
 background：gold; 
} 
  

我尝试了 flex中的各种值： 属性，包括0％，100％或main-size作为flex-basis，但无法获得我正在寻找的结果。

解决方案

看起来您没有正确使用Flexbox：

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

  div {
 display：flex; 
 flex-direction：column; / *我们将方向设置为列* / 
 width：300px; 
 max-height：300px; / *你需要的最大高度* / 
} 
 article {
 flex-grow：1; / *文章将变为flex * / 
 overflow：auto; 
 background：gold; 
} 
 
 / *（颜色，不重要）* / 
 div {background：#eee; } 
 header {background：tomato; } 
 article {background：gold; } 
 footer {background：lightgreen; } 
  

(following up on this question and its helpful answer)

I'm trying to create container with a header and a footer, and a main content area which can grow/shrink as necessary. No sizes are known in advance. The whole thing should be allowed to grow vertically until the container hits a set limit using max-height.

Ideally, the header and footer height never change; the article grows only as high as it needs to display its contents, but is limited by the size of its container.

Can this be achieved with only CSS?

Screenshot

Demo

• working with a fixed container size: Fiddle
• same as above, interactive: Fiddle
• broken version using max-height instead of 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;
}

I've tried various values in the flex: property, including 0%, 100%, or main-size as the flex-basis, but couldn't get the result I'm looking for.

解决方案

Looks like your are not using flexbox properly:

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

这篇关于如何让元素扩展，直到它的容器到达边界（使用flex布局）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！