CSS 嵌套弹性框高度

Posted 2023-03-06

【中文标题】CSS 嵌套弹性框高度

【英文标题】：CSS nested flex box height

【发布时间】：2015-02-20 18:54:36

【问题描述】：

我在根容器的第二个弹性项目中有一个嵌套弹性容器的行布局。我希望嵌套的 flex 容器是其父级的 used 高度的 100%。

<div class="steps root"><!--root container-->
<div class="step one">
    I am very tall. Others should be as high as I am!
</div>
<div class="step two-and-three">
    <div class="steps"><!--nested container-->
        <div class="step two">
            nested child 1. should have 100% vertical height
        </div>
         <div class="step three">
             nested child 2. should have 100% vertical height
        </div>
    </div>
</div>

这是演示问题的小提琴：http://jsfiddle.net/2ZDuE/316/

如果我为嵌套的 flex 容器设置一个明确的高度，那么一切正常。

如何告诉嵌套容器自动填充其容器的垂直空间？

【问题讨论】：

你不需要根据“steps root”类来设置你的高度吗？这就是你的意思：jsfiddle.net/2ZDuE/318 ??

【参考方案1】：

将display:flex 添加到.step.two-and-three 并删除padding-bottom

.steps.root 
  width: 700px;

.steps.root>.step.one 
  height: 300px;
  /*simulate big content in left column*/

.steps 
  display: flex;

.step.one 
  flex: 1 1 33%;
  background-color: rgba(0, 0, 0, 0.1);

.step.two-and-three 
  flex: 2 1 66%;
  background-color: grey;
  display: flex; /* added */

.step.two 
  flex: 1 1 50%;
  background-color: green;

.step.three 
  flex: 1 1 50%;
  background-color: lime;

.step.two-and-three>.steps 
  background-color: olive;
  padding-bottom: 10px;

<div class="steps root">
  <!--root container-->
  <div class="step one">I am very tall. Others should be as high as I am!</div>
  <div class="step two-and-three">
    <div class="steps">
      <!--nested container-->
      <div class="step two">nested child 1. should have 100% vertical height</div>
      <div class="step three">nested child 2. should have 100% vertical height</div>
    </div>
  </div>
</div>