为何flex-direction:column时，flex容器max-height会作用于子项？

初始问题描述 #

当flex-direction设为row时，.b会溢出父容器.a的max-height限制；设为column时，max-height生效，.b不会超出。即使把align-items: stretch改成flex-start等值，情况也没有变化。

初始示例代码 #

HTML代码

<div class="a">
  <div class="b">
  </div>
</div>

CSS代码

.a {
  max-height: 200px;
  background: red;
  display: flex;
  flex-direction: row; /* 可改为column */
}

.b {
  overflow: auto;
  background: blue;
  flex: 1 1 auto;
  height: 500px;
}

编辑补充问题 #

当.b内部添加一个高度较大的子元素时，无论flex-direction设为row还是column，.b都会出现滚动条而不溢出父容器。明明逻辑和之前几乎一致，为何行为差异这么大？

补充示例代码 #

HTML代码

<div class="a">
  <div class="b">
  <div style="height: 500px; background-color: yellow"></div>
  </div>
</div>

CSS代码

.a {
  max-height: 200px;
  background: red;
  display: flex;
  flex-direction: row; /* 可改为column */
}

.b {
  overflow: auto;
  background: blue;
  flex: 1 1 auto;
}

内容的提问来源于stack exchange，提问作者Uarcin