我在一個(gè)容器中有兩個(gè)元素，它們通過使用flex box并排在一起。關(guān)于第二個(gè)元素(。flexbox-2)，我在CSS中設(shè)置它的高度。然而，然后第一個(gè)元素(。flexbox-1)的高度將與。flexbox-2。我該如何停止？flexbox-1與高度匹配。flexbox-2，而是保持其自然高度？

這是我目前所擁有的(也可以作為jsFiddle)

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

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

我知道這是一個(gè)老問題，但更好的解決方案是使用flex-start將flex項(xiàng)設(shè)置為與頂部對(duì)齊。

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

這是一個(gè)舊的解決方案。 我的答案被Aaron使用align-self的新答案取代。這是一個(gè)不依賴于CSS怪癖的更好的解決方案。

只要flex容器本身沒有高度，就可以在第一個(gè)flex項(xiàng)上設(shè)置height: 0%。因?yàn)樗鼪]有從其父級(jí)繼承的高度，任何百分比的高度都會(huì)導(dǎo)致它折疊。然后它會(huì)隨著它的內(nèi)容一起成長。

例子 在本例中，我刪除了-webkit前綴。只有Safari才真正需要它，前綴可以加在無前綴版本的上面。我還刪除了flex-direction:行，因?yàn)樗悄J(rèn)值。

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

您可以通過添加到父align-items:flex-start；

就這樣

將孩子的高度設(shè)置為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>

另一個(gè)選擇是利用& quotcol & quot元素和自動(dòng)寬度功能，當(dāng)flexbox方向?yàn)榱袝r(shí)，該功能作為自動(dòng)高度功能。這里有一個(gè)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

本來想評(píng)論一下@misterManSam的回答，但是我名氣不夠。

它工作得很好，但我在Vercel上遇到了一些麻煩(也許，我在另一個(gè)版本中使用了node-sass)，設(shè)置

height: 0%;

我推薦

height: 100%;

完全一樣的答案，但是在哪里都適用。