在使用Flexbox时，最大的错误是从头开始使用height: 100%。
在很多情况下，我们已经习惯了这种情况，尽管当涉及到Flexbox时，它经常会破坏它。

• 在使用height: 100%时，它经常中断的一个原因是元素的父元素（要拉伸的元素的父元素）需要以某种方式设置高度，而flexbox在不使用它时不需要。
• 另一个原因是，当有孩子在上面和/或下面时，在其中一个孩子上使用100%，它不会考虑其他孩子，并且再次经常中断。

解决方案很简单，只要删除height: 100%，它就会自动工作。
它这样做的原因是，对于 flex item in row direction（默认值），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>

字符串

如果我理解正确的话，您正在查找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;
}

个字符

移除
身高：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>

字符串
上面的例子会告诉你你想要什么。

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

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

字符串

给你

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

字符串