html - 高度为 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;
}
<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
for.flex-child
然后添加flex-grow: 1;
到子类。
添加 flex-grow: 1;
whenflex-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;
}
<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>
推荐阅读
- pascal - fpc:PPU 来源:[单位].pas 不可用
- postgresql - 如何在 postgreSQL 中计算小计
- clojure - 如何伪造涉及潜在危险操作的第三方 API 的嵌套使用?
- sql - 从 2019-05-02 12:00:00 到 2019-05-02 将日期时间转换为日期字符串
- c# - MissingFieldException:找不到字段:'Microsoft.Net.Http.Headers.HeaderNames.Authorization'
- c# - 根据时间变换(Unity & C#)
- javascript - 使用纯 JavaScript 删除不包含在数组中的值的选项
- python - 重采样频率不会在短时间内丢失数据增量
- genexus - 有没有办法知道 For each 何时在genexus X v3 上的第一次和最后一次迭代?
- swift - Firebase 将经过身份验证的用户添加到数据库