Flex布局：如何让换行后的子项仅占用所需空间？

我有一个简单的Flex子项示例：

HTML代码 #

<div id="container">
  <div class="sidebar">
    test tes test
  </div>
  <div class="sidebar">
    test tes test
  </div>
  <div class="sidebar">
    test tes test
  </div>
  <div class="sidebar">
    test tes test
  </div>
  <div class="sidebar">
    test tes test
  </div>
  <div class="sidebar">
    test tes test
  </div>
  <div class="sidebar">
    test tes test
  </div>
  <div class="sidebar">
    test tes test
  </div>
</div>

CSS代码 #

#container {
  display:flex;
}
.sidebar {
  border:1px solid red;
}

当文本未换行时，子项仅占用必要的水平宽度：

但当文本换行后，容器盒子占用的水平宽度超出了实际所需：

请问如何让这些盒子即使在文本换行时也仅占用所需空间？我仍希望在容器上使用display: flex属性。

解决方法 #

要让Flex子项在文本换行后仍保持内容所需的宽度，可通过以下两种方式实现：

方式1：给子项设置自适应宽度

直接给子项添加width: fit-content，它会让元素宽度恰好容纳其内容，即使文本换行也不会额外占用空间：

.sidebar {
  border:1px solid red;
  width: fit-content;
}

方式2：结合flex-wrap与自适应宽度

如果需要子项在容器空间不足时自动换行，同时保持每个子项的内容宽度，给容器添加flex-wrap: wrap，再给子项设置width: fit-content：

#container {
  display:flex;
  flex-wrap: wrap;
}
.sidebar {
  border:1px solid red;
  width: fit-content;
}

注意：原代码中所有子项使用了重复的id="sidebar"，这违反了HTML规范（id必须唯一），建议改为class="sidebar"，上述代码已做修正。

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