如何拉伸flex子元素以填充容器的高度？

Question

我需要将黄色子元素拉伸以填满其父元素的所有高度，而不设置父元素的高度。父元素的高度应该取决于蓝色子元素的文本。 https://jsfiddle.net/7vaequ1c/1/

<div style='display: flex'>
  <div style='background-color: yellow;height: 100%; width: 20px'>
  </div>
  <div style='background-color: blue'>
  some<br>
  cool<br>
  text
  </div>
</div>

- Konstantin Vahrushev

Answer 1

使用Flexbox时，最常见的错误是在各处都开始使用height: 100%。

虽然在许多情况下我们习惯于这样做，但在使用Flexbox时，它经常会出现问题。

一个常见的原因是，在使用height: 100%时，元素的父级（要拉伸的元素的父级）需要以某种方式设置高度，而不使用Flexbox时则不需要。

另一个原因是，当存在上方和/或下方的子元素时，在其中一个子元素上使用100%时，它不会考虑其他子元素，往往会导致问题。

解决方法很简单，只需删除height: 100%，它将自动正常工作。

之所以能够正常工作，是因为在默认情况下，对于行方向（默认方向）的flex项目，align-items控制垂直行为，并且其默认值为stretch。

堆栈片段

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>
  </div>
  <div style='background-color: blue'>
    some<br> cool<br> text
  </div>
</div>

- Asons

---

为什么添加 height: 100% 会破坏它？ - cib

在这种情况下，height: 100% 可以起作用，但要实际达到效果，子元素的父级需要明确设置高度。现在，由于父级没有这样做，Flexbox 行（方向）子元素的高度由 align-items 控制，并且默认为 stretch，它只需填充其父容器的高度即可。我所说的“它往往会破坏它”，是指当存在上下两个子元素时，在中间的子元素上使用 100% 将不考虑其他子元素，因此可能会破坏布局。 - Asons

翻译成中文：英雄。我在到处100％，移除它后解决了问题。 - Alchem

谢谢你！ - pmandell

这个答案并不适用于每种情况，并且它未能解释关于高度的假设：100%破坏了预期的布局。 - Ingo Steinke

@IngoSteinke -- 这不是假设，当特定条件不满足时，它会失效。我添加了一些情况，其中它会失败。当然，无论给定的布局如何构建，都不能保证其有效，因此需要仔细阅读有关 flexbox 的使用说明。 - Asons

Answer 2

如果我理解正确，您正在寻找 align-items 属性，该属性定义了跨轴的布局，本例中为垂直方向。

您可以在这里找到一个很好的概述：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flexbox {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch; // <-- stretch vertical (default value, can be omitted here)
  align-content: center;
}

.box {
    padding: 1em;
    text-align: center;
    margin: 1em;
}

.box--yellow {
  background-color: yellow;
}

.box--blue {
  background-color: blue;
  color: white;
}

<div class="flexbox">
  <div class="box box--yellow">
    yellow
  </div>
  <div class="box box--blue">
    some<br>
    cool<br>
    text
  </div>
</div>

- Daniel Sixl

---

align-items: stretch; 是默认值，因此添加该属性值不会有任何影响。 - Asons

@LGSon 确实。我只是想指出负责拉伸的属性。显然，我应该提到这是默认行为！ - Daniel Sixl

Answer 3

移除

height:100%;

而是像这个例子一样做：

<div style="display:flex; flex-direction:column">
<div style="flex-grow:1;"> Item 1 </div>
<div style="flex-grow:1;"> Item 2 </div>
</div>

上面的例子将展示您想要的内容。

- Mas Ghahremani

Answer 4

<div style='display: flex'>
  <div style='background-color: yellow; width: 20px'>

  </div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div>

- Lead Developer

---

就像@LGSon所说的那样。您可能是指flex-grow：<value> ..https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow :) - trainoasis

Answer 5

给你：

<div style='display: flex;'>
  <div style='background-color: yellow; flex: none auto; width: 20px'></div>
  <div style='background-color: blue'>
    some<br>
    cool<br>
    text
  </div>
</div>

- davemaloney

---

不解释是一个不好的答案，而且你还有语法错误。我建议在回答使用Flexbox的问题之前先学习一下Flexbox。 - Asons