如何让换行的Flex容器不超水平扩展，贴合子元素？

可行，不需要依赖媒体查询就能实现。你的问题核心是inline-flex在子元素换行后，容器会默认撑满父元素的可用宽度，而非贴合子元素的实际总宽度。以下是两种直接的解决方法：

方法一：使用width: fit-content #

给Flex容器添加width: fit-content属性，它会让容器宽度收缩到刚好容纳所有子元素的最小宽度，即使子元素换行也不会过度扩展：

.flex-container {
  display: inline-flex;
  flex-wrap: wrap;
  padding: 10px;
  background-color: lightblue;
  width: fit-content; /* 关键属性 */
}

.flex-item {
  padding: 300px;
  margin: 5px;
  background-color: coral;
  color: black;
  font-weight: bold;
}

方法二：用inline-grid替代inline-flex #

如果布局需求允许，inline-grid的inline特性天然支持换行后贴合内容宽度，搭配auto-fit和min-content可以实现类似Flex的自动换行效果：

.flex-container {
  display: inline-grid;
  grid-template-columns: repeat(auto-fit, min-content);
  padding: 10px;
  background-color: lightblue;
  gap: 5px; /* 替代子元素的margin，避免间距重复 */
}

.flex-item {
  padding: 300px;
  background-color: coral;
  color: black;
  font-weight: bold;
}

以上两种方案都能让容器在子元素换行时贴合其形状，无需额外媒体查询适配窄屏。

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