如何让Flex布局中图片标题自动换行而不撑大容器？

我用flexbox实现一组带标题的图片并排显示，要求图片保持统一高度，按各自配置的宽高比自动计算宽度来简化代码。但添加标题后出现问题：如果标题单行宽度超过图片自动计算的宽度，文本会撑大容器，不会自动换行。

我的需求：

• 不给figure设置固定宽度，宽度由图片的固定高度和宽高比决定；
• 试过给figure或标题设置width: min-content/max-content/fit-content，无效；
• 调整flex-grow也没用，因为和未分配弹性空间无关。

原始代码 #

CSS #

.flex {
  display: flex;
  gap: 1rem;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  object-fit: cover;
  height: 200px;
  width: auto;
}

.pic-square img {
  aspect-ratio: 1 / 1;
}

.pic-wide img {
  aspect-ratio: 16 / 9;
}

HTML #

<div class="flex">
  <figure class="pic-square">
    <img src="http://placekitten.com/200/300">
    <figcaption>Kitten 1 caption which is long enough that it needs more width than the image if it were a single line, but I want it to wrap rather than pressuring its parents into growing.</figcaption>
  </figure>
  <figure class="pic-wide">
    <img src="http://placekitten.com/400/300">
    <figcaption>Kitten 2 caption.</figcaption>
  </figure>
</div>

解决方案 #

核心是解决flex子项的最小宽度限制问题，修改后的CSS如下：

.flex {
  display: flex;
  gap: 1rem;
}

figure {
  margin: 0;
  padding: 0;
  min-width: 0; /* 关键：取消flex项默认的最小宽度限制 */
}

img {
  object-fit: cover;
  height: 200px;
  width: auto;
}

figcaption {
  word-wrap: break-word; /* 确保长文本自动换行 */
}

.pic-square img {
  aspect-ratio: 1 / 1;
}

.pic-wide img {
  aspect-ratio: 16 / 9;
}

原理说明 #

flex容器中的子元素默认有min-width: auto的特性，这会导致子元素的宽度不会小于其内部内容的最小宽度，所以过长的标题会撑大figure。设置min-width: 0后，figure的宽度会被内部图片的宽度约束（图片宽度由固定高度和宽高比计算得出），此时标题会继承figure的宽度，自然触发自动换行。

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