html - 高度为 100% 的 Div 溢出到其父级下方的 flexbox 行

标签 html css 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;
}
<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% 高度，但这意味着它们会溢出。

我如何让它们展开到它们父级的底部？

最佳答案

对.flex-child使用flex，然后在子类中添加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>

关于html - 高度为 100% 的 Div 溢出到其父级下方的 flexbox 行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58334150/

上一篇：html - 屏幕阅读器的局限性

下一篇：jquery - RegEx 只有数字和单位添加退格问题

相关文章：

javascript - IE 中的文本选择预防问题

css - Flexbox:填充剩余空间但仍然包裹

javascript - 在两个 flex 元素之间绘制箭头

javascript - 包装所有 AJAX 调用 jQuery

javascript - Bootstrap 4 表格，可滚动主体和标题固定

jquery - 如何使用 jquery 隐藏一个页面上的元素和不同页面上的按钮

html - 为导航栏设置下划线动画

html - Chrome 和 Firefox 中的 Flexbox div 拉伸(stretch)不同

java - 当我尝试从其他计算机访问小型 Web 应用程序时，CSS 不起作用

javascript - 将 onclicklistener 重新附加到按钮

©2024 IT工具网  联系我们