为什么弹性项目在内容换行时会变大？

Question

我有一个带有方向行的弹性容器，有 3 个子容器，其中第一个容器具有固有大小，其他容器具有固定的宽度和高度。

我希望固定大小的那些总是放在第一个之后。只要第一个内容不换行，此操作就有效。一旦第一个包裹起来，它就会增长以填充父级的剩余空间，这会在第一个和第二个子级之间产生不必要的间隙：

游乐场和代码

https://codepen.io/skaface/pen/xxvxwoM

<div class="flex-container">
  <div class="child-dynamic">longword word longword word longword word...</div>
  <div class="child-fixed"></div>
  <div class="child-fixed"></div>
</div>

<div class="flex-container">
  <div class="child-dynamic">short</div>
  <div class="child-fixed"></div>
  <div class="child-fixed"></div>
</div>

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  
  width: 300px;
  margin-bottom: 100px;
  border: 1px solid black;
}

.child-dynamic {
  background: rgb(254 202 202);
}

.child-fixed {
  width: 16px;
  height: 16px;
  background: rgb(74 222 128);
}

Answer 1

由于换行的子元素默认会填满剩余空间，但第一行剩余空间不足以容纳整个单词，因此会留下间隙。可以将子元素的overflow-wrap属性调整为break-word；来解决这个问题。