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

Posted 2023-03-05

【中文标题】防止弹性项目高度扩展以匹配其他弹性项目

【英文标题】：Prevent a flex items height from expanding to match other flex items

【发布时间】：2015-02-18 23:08:01

【问题描述】：

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

这是我目前所拥有的（也可以使用as a 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>

【问题讨论】：

相关：How to disable equal height columns in Flexbox?

【参考方案1】：

我知道这是一个老问题，但更好的解决方案是使用 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>

【讨论】：

感谢@MrGood 接受的答案已超过 3 年，当时是实现预期结果的好方法。

绝妙的答案！

请注意，您还可以在父元素上执行 'align-items: flex-start' 以防止所有子元素长大 - 在我的情况下需要。

align-items: center, baseline, flex-start, flex-end 也正常工作

这是必要的，因为align-items 的默认值为stretch。

【参考方案2】：

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

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

示例

在此示例中，我删除了 -webkit 前缀。 It's only really required for 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>

【参考方案3】：

您可以通过添加到父 align-items: flex-start;

轻松解决此问题

就是这样

【讨论】：

欢迎来到 Stack Overflow。在使用现有答案添加一个五年前的问题的答案时，重要的是要解释您正在解决的问题的新方面以及您的答案如何工作以及为什么应该使用它。正确的代码格式也确实很有帮助，因为现在你在一个句子中只有粗体文本，它没有提供关于将它添加到哪个 css 规则的上下文。

是的，但这会将所有项对齐到顶部

【参考方案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>

【参考方案5】：

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