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

【问题标题】：Div with 100% height overflows to flexbox row below its parent [duplicate]高度为 100% 的 Div 溢出到其父级下方的 flexbox 行 [重复]
【发布时间】：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% 的高度，但这意味着它们溢出。

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

【问题讨论】：

标签： html css flexbox

【解决方案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>

【讨论】：

谢谢，效果很好。