Flex容器使用max-width而非fit-content的问题求解

将容器的display: flex改为display: inline-flex，移除width: fit-content（inline-flex会自动自适应内容宽度），保留flex-wrap: wrap和max-width:200px即可实现需求：

div {
  max-width: 200px;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  background-color: green;
  margin-bottom: 8px;
}

p {
  background-color: red;
}

原理说明 #

• inline-flex容器的宽度会自适应换行后的最宽行内容宽度，而非子项不换行时的总宽度，因此顶部容器会自动收缩到实际需要的宽度（和底部容器宽度一致）。
• max-width:200px仍会生效：当内容最宽行超过200px时，容器会被限制在200px内，子项继续换行。
• flex-wrap: wrap保证子项在容器宽度不足时自动换行。

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