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

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

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