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

81

我在容器中有两个元素，它们通过使用flex box并排放置。在第二个元素（.flexbox-2）上，我在CSS中设置它的高度。但是，第一个元素（.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>

展开摘要

html css flexbox

— 汤姆·奥克利
source

相关：如何在Flexbox中禁用等高列？

— Michael Benjamin'3

56

这是一个旧的解决方案。 我的答案已被Aaron使用的新答案align-self所取代。这是一个不依赖CSS怪癖的更好的解决方案。

只要flex容器本身没有高度，就可以height: 0%在第一个flex项上进行设置。由于它没有从其父级继承的高度，因此任何百分比高度都会导致其崩溃。然后它将随其内容一起增长。

例

在此示例中，我删除了-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>

展开摘要

— 先生
source

144

我知道这是一个老问题，但是更好的解决方案是使用将弹性项目设置为与顶部对齐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>

展开摘要

— 亚伦
source

1

感谢@MrGood被接受的答案已有3年以上，在当时是达到预期效果的好方法。

— 亚伦

1

辉煌的答案！

— 亚历山大·威格莫

5

请注意，您也可以在父元素上执行“ align-items：flex-start”，以防止所有子项增长-在我的情况下是必需的。

— Daniel Sokolowski

5

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

— ViES

2

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

— DylanReile

1

您可以通过添加到父align-items来轻松解决此问题：flex-start;

就这样

— 塞尔吉·塞博塔鲁
source

1

欢迎使用堆栈溢出。在使用已有答案为五年的老问题添加答案时，重要的是要解释您要解决的问题的新方面，答案的工作方式以及为什么要使用它。正确的代码格式也确实有帮助，因为现在您只在句子中使用粗体字，而不提供有关将CSS规则添加到其中的上下文。

— Jason Aller

0

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

展开摘要

— 埃里克·马丁·约丹
source