Flexbox：列和列反转方向打破图像宽高比

Question

给出一个非常简单的布局：

div{
    border: 1px solid;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
}

img{
  height: auto;
  max-width: 100%;
}

section{
  width: 100%;
}

<div>
    <section>hello world</section>
    <img src="https://assets.servedby-buysellads.com/p/manage/asset/id/26903">
</div>

图像不会遵循其宽高比（通常使用auto高度并约束max-width），而是始终显示其实际高度。

我正在试图弄清楚为什么会出现这种情况：flex-direction: column和flex-direction: column-reverse有什么特别之处导致这种情况发生吗？

我目前的理论是，因为column和column-reverse方向要求图像的主要约束属性为height或max-height（因为我们现在有一个堆栈的东西流动和垂直约束而不是水平约束，并且父div需要一个固定的高度来使整个事情发挥作用。玩下面的小提琴似乎表明可能是这种情况，但任何人都可以确认吗？

Here's a fiddle with the same markup and styling.