让Flex首个子元素占100%宽度且不扩大容器宽度

我有一个flexbox容器，希望首个子元素占100%宽度，目前该需求已实现，但出现意外问题：容器宽度仍保持为首个子元素未设置100%宽度时的宽度。我为容器添加了边框，以此展示其宽度超出预期的情况。请问如何实现首个子元素独占一行且宽度为100%，同时让容器边框刚好贴合第二个图片的右侧？

代码示例 #

CSS #

.flex {
  display:inline-flex;
  flex-wrap:wrap;
  border:1px solid black;
}

.first-child {
  display:inline-block;
  width:100%;
  padding:10px 0;
}

.image {
  margin-left:5px;
}
.image:nth-child(2) {
  margin-left:0;
}

img {
  display:block;
}

HTML #

<div class="flex">
  <span class="first-child">Lorem Ipsum</span>
  <div class="image">
    <img src="https://i.picsum.photos/id/54/300/300.jpg?hmac=LmoFB-1252dfBUuC19mSt9fePqp2CCJEY2_EL9ewdPE" />
  </div>
  <div class="image">
    <img src="https://i.picsum.photos/id/916/300/300.jpg?hmac=lP6QL2bac_8f8XYGAVNzgf2nHPlfRUNDAiDM-Kejgpg" />
</div>

当前效果 #

问题根源在于inline-flex容器的宽度计算逻辑：当启用flex-wrap:wrap时，容器默认会以所有子元素不换行时的总宽度作为自身宽度，即便第一个子元素强制占满一行，容器仍会保留这个初始的最大宽度。

只需对容器和首个子元素做两处调整即可解决：

修改后的CSS代码 #

.flex {
  display:inline-flex;
  flex-wrap:wrap;
  border:1px solid black;
  width: min-content; /* 让容器宽度贴合内容最小宽度 */
}

.first-child {
  flex-basis: 100%; /* 替代width:100%，更适配flex布局 */
  padding:10px 0;
}

.image {
  margin-left:5px;
}
.image:nth-child(2) {
  margin-left:0;
}

img {
  display:block;
}

关键说明 #

1. width: min-content：使容器宽度等于内容中最宽的不可断行区块的总宽度，这里就是两张图片加间距的宽度，边框会完美贴合最右侧图片。
2. flex-basis:100%：相比width:100%更符合flex布局规范，确保首个子元素占满容器整行，触发后续元素换行。

若需兼容不支持min-content的旧浏览器，可替换为width: fit-content，或给容器包裹一层inline-block的父元素，现代浏览器中min-content已得到广泛支持。

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