如何拉伸伸缩子以填充容器的高度？

Question

我需要伸展黄色的孩子来填补父母的所有身高。无需设置父级高度。父级的高度应取决于蓝色的子级文本。

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

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>