如何让flexbox容器子元素不拉伸而是水平溢出？

我之前也踩过这个Flexbox的坑！明明给子元素设了固定宽度，结果还是被挤得变形，后来才搞懂是默认的flex属性在搞鬼。核心问题在于：Flex子元素默认的flex-shrink: 1会让它们在容器空间不足时自动压缩，看起来就像被“拉伸”变形了。下面给你两种实用的解决思路：

方案1：实现水平滚动效果 #

适合子元素总宽度超过容器，需要用户滚动查看全部内容的场景。

/* Flex容器样式 */
.flex-container {
  display: flex;
  overflow-x: auto; /* 子元素超宽时自动显示水平滚动条 */
  gap: 1rem; /* 可选，给子元素之间添加间距 */
  padding: 0.5rem;
}

/* Flex子元素样式 */
.flex-item {
  flex-shrink: 0; /* 关键！禁止子元素被压缩，保持固定宽度 */
  width: 220px; /* 你需要的固定宽度 */
  height: 180px; /* 示例高度，可根据需求调整 */
  background-color: #f0f0f0;
  border-radius: 4px;
}

设置后，子元素会严格保持你定义的宽度，当总宽度超出容器时，容器会出现水平滚动条，完全不会挤压或拉伸子元素。

方案2：右侧内容截断隐藏 #

如果不需要滚动，只想让超出容器的部分直接隐藏，甚至让子元素内的文本也截断显示，可以这么做：

/* Flex容器样式 */
.flex-container {
  display: flex;
  overflow-x: hidden; /* 隐藏容器外的所有内容 */
}

/* Flex子元素样式 */
.flex-item {
  flex-shrink: 0; /* 同样要禁止压缩，确保固定宽度生效 */
  width: 220px;
  height: 180px;
  background-color: #f0f0f0;
  /* 可选：如果子元素内的文本需要截断显示 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0.5rem;
}

额外排查点： #

如果你设置后还是出现拉伸情况，检查一下子元素有没有被意外设置了flex-grow: 1（默认是0，不会拉伸）。如果开了这个属性，子元素会自动填充容器的剩余空间，把它改回flex-grow: 0就好。

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