高度为100％的Div溢出到其父级下的flexbox行

Question

高度为100％的Div溢出到其父级下的flexbox行

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

我如何让他们只扩展到其父母的底部？

Answer 1

Nid*_*eph 5

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

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

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，1 月前
查看次数：	48 次
最近记录：	6 年，1 月前