html-阻止弹性项目的高度扩展以匹配其他弹性项目

我在容器中有两个元素,它们通过使用flex box并排放置。 在第二个元素(<div class="container"> <div class="flexbox-1">.flexbox-1</div> <div class="flexbox-2">.flexbox-2</div> </div>)上,我在CSS中设置它的高度。 但是,然后第一个元素(.flexbox-1)将匹配.flexbox-2的高度。如何阻止.flexbox-1匹配.flexbox-2的高度,而只保留其自然高度?

这是我到目前为止的内容(也可以作为jsFiddle使用)

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

Tom Oakley asked 2019-10-07T19:12:38Z
2个解决方案
90 votes

我知道这是一个老问题,但是更好的解决方案是使用<div class="container"> <div class="flexbox-1">"align-self: flex-start;"</div> <div class="flexbox-2">.flexbox-2</div> </div>将flex项目设置为与顶部对齐。

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

Aaron answered 2019-10-07T19:13:49Z
42 votes

这是一个旧的解决方案。   我的答案已被Aaron使用<div class="container"> <div class="flexbox-1">.flexbox-1</div> <div class="flexbox-2">.flexbox-2</div> </div>的新答案所取代。这是一个不依赖CSS怪癖的更好解决方案。

只要flex容器本身没有高度,就可以在第一个flex项上设置<div class="container"> <div class="flexbox-1">.flexbox-1</div> <div class="flexbox-2">.flexbox-2</div> </div>。 因为它没有从其父级继承的高度,所以任何百分比高度都会导致其崩溃。 然后它将随其内容一起增长。

在此示例中,我删除了<div class="container"> <div class="flexbox-1">.flexbox-1</div> <div class="flexbox-2">.flexbox-2</div> </div>前缀。 Safari仅真正需要它,并且可以在非前缀版本之上添加前缀。 我还删除了flex-direction: row,因为它是默认值。

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

misterManSam answered 2019-10-07T19:13:15Z
translate from https://stackoverflow.com:/questions/27575779/prevent-a-flex-items-height-from-expanding-to-match-other-flex-items