如何拉伸 flex child 以填充容器的高度？

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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 Flexbox 时，主要错误是从头开始使用 height: 100% 。

在很多情况下我们已经习惯了，但是当涉及到 Flexbox 时，它常常会破坏它。

解决方法很简单，去掉 height: 100% 自动运行。

这样做的原因是，对于 行 方向的 _弹性项目_（默认）， 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 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 4.0 许可协议