Question

我在容器内有两个元素，它们通过使用弹性框并排放置。在第二个元素（.flexbox-2）上，我在CSS中设置了它的高度。但是，第一个元素（.flexbox-1）将匹配.flexbox-2的高度。我如何阻止.flexbox-1匹配.flexbox-2的高度，而只是保持其自然高度？

这是我目前所拥有的（也可用as a jsFiddle）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我知道这是一个老问题，但更好的解决方案是使用flex-start将弹性项目设置为与顶部对齐。

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

Answer 2

这是一个旧解决方案。 我的答案被new answer by Aaron using align-self取代了。这是一个更好的解决方案，不依赖于CSS怪癖。

只要弹性容器本身没有高度，您就可以在第一个弹性项目上设置height: 0%。因为它没有从其父级继承的高度，所以任何百分比高度都会导致它崩溃。然后它会随着内容的增长而增长。

实施例

在此示例中，我删除了-webkit前缀。 It's only really required for Safari并且前缀可以添加以上非前缀版本。我还删除了flex-direction: row，因为它是默认值。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以通过将其添加到父 align-items：flex-start;

轻松地解决此问题

就这样

Answer 4

将孩子的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>

Answer 5

另一种选择是利用“col”元素和自动宽度功能，当 flexbox 方向为列时，它用作自动高度功能。这是引导程序 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

防止弹性项目高度扩展以匹配其他弹性项目

5 个答案:

实施例