css - flex-shrink在垂直（列）flexbox 容器中不起作用

Question

-tag的美妙之处<img>在于，当您仅设置宽度时，它会根据其纵横比垂直占据布局。凉爽的！

现在我希望图像像那样做和表现，直到没有更多的垂直空间。至于我的理解flex-shrink正是这样做的。

在以下代码笔中，.flexboxs 高度被硬编码以模拟高度限制（在我的项目中，这将是全高视口场景中的另一个 flex-container） https://codepen.io/katerlouis/pen/RwrWorr

现在为什么图像在纵横比大于 1.85 时不会缩小 - 在这里调试它更容易：https ://cdpn.io/katerlouis/debug/RwrWorr/dGMXWKBbVKnk - 使用开发工具中的响应式调整大小来更改视口实例为 770x415 并降低视口的高度以使其不会缩小。

为了让事情更清楚：这是 770x300 视口发生的情况

这是期望的结果。

我会理解这是否是不可能的，因为没有 css 代码控制图像的高度？但是为什么会flex-grow起作用呢？

标签： cssimagelayoutflexbox