为什么Flex项目的宽度和高度会影响Flex项目的渲染方式？
Flexbox中具有max-height样式的图像呈现不同的呈现方式，具体取决于是否设置了height和width属性。
具有设置为图像的真实宽度/高度的属性的属性将保留其宽高比，但没有属性的属性会尊重max-height并显示压扁。
.flex-parent { display: flex; max-height: 10vh; }
<div class="flex-parent"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> </div>
这就是Chrome 58中出现的情况（在Firefox 54中也是如此）。
为什么他们呈现不同？ pipe理这种行为的规则是什么？
我的（显然是不正确的）理解是，高度和宽度属性覆盖图像加载时发现的内在高度和宽度，如果高度和宽度属性等于图像的尺寸，则一旦图像渲染应该没有区别已加载。
上下文正在制作一个响应式图像的页面，其中每个图像
- 可以有独特的原始尺寸
- 在加载时不会导致回stream，即在初始渲染时保留正确的空间（因此使用高度和宽度属性）
- 可以一次适合所有的屏幕（因此我搞乱在CSS中）
青蛙图片来自https://en.wikipedia.org/wiki/File:Red_eyed_tree_frog_edit2.jpg
flex容器的初始设置是align-items: stretch 。
这意味着flex项目将跨越容器的横轴扩展。
在行方向的容器中，就像问题一样，横轴是垂直的。
这意味着物品（在这种情况下的图像）将覆盖容器的整个高度。
但是，当Flex项目具有定义的交叉大小时，将覆盖默认的stretch 。
从规格：
8.3。 交叉轴alignment：
align-items和align-self属性柔性物品可以在柔性容器的当前线的横轴上alignment，类似于
justify-content但是在垂直方向上。
stretch如果Flex项目的交叉大小属性计算为
auto，并且两个交叉轴边界都不是auto，则flex项目将被拉伸。
这是关键的语言：
如果flex项目的cross size属性计算为
auto
这是规范如何定义“跨尺寸属性”：
弹性物品的宽度或高度（以交叉尺寸为准）是物品的交叉尺寸 。 横向尺寸属性是横向尺寸中的
width或height。
所以你的代码看起来像规范中定义的那样。
这是你有什么：
.flex-parent { display: flex; max-height: 10vh; }
<div class="flex-parent"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> </div>
尝试阅读w3c flexbox规格，并偶然发现这一点 。 它说
对于每个维度，如果flex容器的内容框的尺寸是一个确定的尺寸，则使用该尺寸; 如果柔性容器的该尺寸在最小或最大内容约束下被确定大小，则该维度中的可用空间就是该约束。
否则，从该维度的可伸缩容器可用空间中减去柔性容器的边距，边框和填充，并使用可能导致无限值的该值。
希望这可以帮助。
在这里你写了最大高度：10vh，除了最新的iOS 6以外，任何浏览器都不支持vh。这适用于所有与视口有关的长度单位。 使用其他值而不是Vh这将工作正常。 请阅读这个博客https://css-tricks.com/the-lengths-of-css/ 。
.flex-parent { display: flex; max-height: max-content; }
<div class="flex-parent"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> <img width="320" height="240" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Red_eyed_tree_frog_edit2.jpg/320px-Red_eyed_tree_frog_edit2.jpg"> </div>
问题是你设置最大高度。 CSS属性max-height默认情况下不会被inheritance。 你的css声明创build了一个10％的视口高度的div。 没有尺寸的图像根据其父尺寸缩小。 您设置隐式尺寸的图像始终是这些尺寸。 根据div的大小，它可能会溢出。 如果您将max-height属性放在第一个图像上，则应resize以保持纵横比相同。
你应该考虑在px设置它们。
