html flex 的高度,html – 使flexbox行成为最短子元素的高度？

The goal is to have a row that is the same height as the shortest child element.

这不是flexBox可以自动执行的操作.

您需要找到一种方法告诉容器最短孩子的高度是多少,以便调整其高度以匹配. JavaScript似乎还有很长的路要走.

Take two images as examples,one has 200px height the other has 120px height. This example below works as intended when elements are the direct children of the flex element.

“下面的示例按预期工作……”我认为你的意思是行的高度是较短图像的高度(120px).

事实上,这行是200px高：

较短的图像实际上从120px拉伸到200px,因为Flex容器上的默认设置是align-items：stretch,这意味着flex项目将扩展横轴的整个长度. (这就是flexBox如何提供具有相同高度列的布局.)

如果你覆盖默认值,比方说,对齐项目：flex-start,你会清楚地看到较高的项目设置了容器的高度.

.row {

display: flex;

align-items: flex-start; /* new */

background: orange;

}