CSS Flexbox问题：如何让text-wrapper宽度仅适配内容

要让.text-wrapper的宽度始终适配内容（即使内部元素换行），可以通过以下两种方式实现：

方法一：给.text-wrapper设置width: fit-content #

fit-content会让元素宽度刚好容纳其内容的最大宽度，不管是否换行，都不会铺满父容器。修改后的CSS如下：

.fixed-width {
  width: 800px;
  display: flex;
}
.text-wrapper {
  background-color: green;
  display: flex;
  flex-wrap: wrap;
  width: fit-content; /* 关键属性 */
}
.text-wrapper>div {
  border: 1px dashed black;
}

方法二：将.text-wrapper的display改为inline-flex #

inline-flex会让容器以行内元素的形式呈现，宽度由内容直接决定，同时保留flex布局的特性：

.fixed-width {
  width: 800px;
  display: flex;
}
.text-wrapper {
  background-color: green;
  display: inline-flex; /* 替换原display:flex */
  flex-wrap: wrap;
}
.text-wrapper>div {
  border: 1px dashed black;
}

原理说明 #

原代码中.text-wrapper作为flex容器，当内部元素换行时，flex容器默认会扩展到父容器的可用宽度（因为flex容器的min-width默认值为auto，会根据内容和可用空间自动调整）。通过width: fit-content或inline-flex，可以强制容器宽度仅由内容的最大行宽决定，避免铺满父容器。

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