高度为 100% 的 Div 溢出到其父级下方的 flexbox 行 [重复]

Posted

技术标签:

【中文标题】高度为 100% 的 Div 溢出到其父级下方的 flexbox 行 [重复]【英文标题】：Div with 100% height overflows to flexbox row below its parent [duplicate] 【发布时间】：2020-02-08 13:29:33 【问题描述】：

我在 flexbox 数组中有一系列元素。每个元素都包含一个“卡片”，其高度各不相同。当我试图让卡片占据它们所在的 flexbox 子元素的剩余空间时，它们会溢出到下面行中的元素中。如果我指定所有 flex-children 的高度都是 100%，那么它们的高度实际上会缩小到它们内部卡片的大小。

#flex_parent 
  margin: 1em;
  display: flex;
  flex-wrap: wrap;


.flex-child 
  box-sizing: border-box;
  margin-bottom: 1em;
  width: 50%;


.full-height 
  height: 100%;
  background: #99F !important;


.child-description 
  height: 100%;



/* cosmetic */

body 
  background: black;
  color: white;


h4 
  color: red;


.flex-child 
  border: 1px dotted red;


.child-card 
  background: #FFA;
  color: #000;

<body>
  <div id="flex_parent">
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card full-height">
        <div class="child-description">
          <p>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
        </div>
      </div>
    </div>
    <div class="flex-child">
      <h4>Title title title</h4>
      <div class="child-card">
        <div class="child-description">
          <p>123 123</p>
        </div>
      </div>
    </div>
  </div>
</body>

蓝色卡片的高度为 100%。它们实际上是其父级的 100% 的高度，但这意味着它们溢出。

我如何让它们只扩展到其父级的底部？

【问题讨论】：

【参考方案1】：

将flex 用于.flex-child，然后将flex-grow: 1; 添加到子类。

在flex-direction: column; 时添加flex-grow: 1; 将强制元素占据容器的剩余高度。

#flex_parent 
  margin: 1em;
  display: flex;
  flex-wrap: wrap;


.flex-child 
  box-sizing: border-box;
  width: 50%;
  display: flex;
  flex-direction: column;


.child-description 
  height: 100%;



/* cosmetic */

body 
  background: black;
  color: white;


h4 
  color: red;


.flex-child 
  border: 1px dotted red;


.child-card 
  background: #FFA;
  color: #000;
  flex-grow: 1;


.full-height 
  background: #99F !important;

<div id="flex_parent">
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card full-height">
      <div class="child-description">
        <p>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123<br>123 123<br>123 123<br>123 123<br>123 123</p>
      </div>
    </div>
  </div>
  <div class="flex-child">
    <h4>Title title title</h4>
    <div class="child-card">
      <div class="child-description">
        <p>123 123</p>
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢，效果很好。

以上是关于高度为 100% 的 Div 溢出到其父级下方的 flexbox 行 [重复]的主要内容，如果未能解决你的问题，请参考以下文章

边距前 100% - 父 Div 的高度

引导程序。 div 100% 其父元素的高度 [重复]

将子 div 高度限制为父容器高度 [重复]

为啥 100% 不等于 100% 高度？

让孩子处于父母的 100% 高度且溢出：自动

div用绝对值填充父级的剩余高度