如何阻止flex-direction为column的flex-item自动撑满父容器宽度？

我在flex容器内放置了多个flex子元素，容器的flex-direction属性设置为column。其中一个元素的文本内容较多，导致内容换行，此时该元素的宽度自动变为父容器的100%。如何避免这种情况发生？

补充说明：绿色的元素宽度应在第二个"Twentyone"处停止，而非撑满父容器。

示例代码 #

CSS

.parent {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  width: 200px;
  align-items: flex-start;
}

.child:nth-child(odd) {
  background-color: chartreuse;
}

.child:nth-child(even) {
  background-color: chocolate;
}

.long {
  /* 待添加样式 */
}

HTML

<div class="parent">
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child long">Twentyone Twentyone Twentyone</div>
  <div class="child">Four</div>
  <div class="child">Five</div>
</div>

期望效果示意图 #

解决方案 #

给长文本的子元素添加width: fit-content属性即可：

.long {
  width: fit-content;
}

原理说明

width: fit-content会让元素的宽度自适应其内容的实际需求——即使文本换行，元素宽度也只会匹配内容中最长一行的宽度，不会强制撑满父容器的宽度。

如果需要兼容更老旧的浏览器，也可以用display: inline-block替代，同样能达到类似效果：

.long {
  display: inline-block;
}

内容的提问来源于stack exchange，提问作者marc-cs50