防止伸缩项的高度扩展到与其他伸缩项匹配

小开

最佳答案

这是个老办法了。 我的答案被这个新的答案由亚伦使用 align-self所取代。这是一个更好的不依赖于 CSS 的解决方案。

只要是 Flex 容器 没有高度，就可以在第一个 flex 项上设置 height: 0%。因为它没有高度从它的父继承，任何 百分比高度将导致它崩溃。然后它会随着里面的东西一起生长。

Example

在这个例子中，我删除了 -webkit前缀。只有在 Safari 上才需要和前缀可以加以上的无前缀版本。我还删除了 flex-direction: row，因为它是默认值。

.container {
display: flex;
}
.flexbox-1 {
flex: 1;
height: 0%;
border: solid 3px red;
}
.flexbox-2 {
flex: 2;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}

<div class="container">
<div class="flexbox-1">.flexbox-1</div>
<div class="flexbox-2">.flexbox-2</div>
</div>

小开

I know this is an old question but a better solution is to set the flex item to align to the top using flex-start.

/* Default Styles */
.container {
display: flex;
}
.flexbox-2 {
flex: 2;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}
.flexbox-1 {
flex: 1;
align-self: flex-start;
border: solid 3px red;
}

<div class="container">
<div class="flexbox-1">"align-self: flex-start;"</div>
<div class="flexbox-2">.flexbox-2</div>
</div>

小开

将儿童的 height设置为 max-content将防止他们收缩。

.container {
display: -webkit-flex;
-webkit-flex-direction: row;
}
.flexbox-1 {
-webkit-flex: 1;
border: solid 3px red;
height: max-content;
}
.flexbox-2 {
-webkit-flex: 2;
border: solid 3px blue;
height: 200px;
margin-left: 10px;
}

<div class="container">
<div class="flexbox-1">.flexbox-1</div>
<div class="flexbox-2">.flexbox-2</div>
</div>

小开

您可以通过添加到父 对齐项: 弹性启动;来轻松地解决这个问题

仅此而已

小开

Another option is to utilize "col" element and auto-width feature, which works as auto-height feature when flexbox orientation is column. Here's an example with bootstrap 5

<div class="d-flex flex-column">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>

参考资料: https://getbootstrap.com/docs/5.0/layout/grid/#equal-width