如何让滚动容器内的按钮根据文本内容自动调整宽度而不溢出

当父容器启用横向滚动时，flex 子项（如按钮）可能因缺乏明确宽度约束而压缩文本、导致溢出；通过为滚动容器设置固定或最小宽度，并配合 `flex-shrink: 0` 和 `white-space: nowrap`，可确保按钮始终包裹文本并支持平滑滚动。

在 React + CSS 的实际开发中，你遇到的问题非常典型：.div1 启用 overflow-x: scroll 后，内部 .groups-button 按钮未按预期随文本内容伸缩，反而被强制压缩、文字换行或溢出。根本原因在于 Flex 容器在滚动模式下默认允许子项收缩（flex-shrink: 1），且未限制文本换行行为，导致 fit-content 失效。

✅ 正确解法不止是简单加 width: 500px（如答案所提），而应组合以下关键样式：

.div1 {height: 11.29629%;   display: flex;   flex-direction: row;   margin-left: 1.8125em;   overflow-x: auto; /* 推荐用 auto 而非 scroll，更语义化 */   overflow-y: hidden;   -ms-overflow-style: none;   scrollbar-width: none;   /* 关键：防止容器被内容撑垮，同时保证足够宽度容纳所有按钮 */   min-width: fit-content; /* 或设具体值如 600px，取决于最大按钮总宽 */   /* 可选：禁用滚动条但保留滚动能力 */   &::-webkit-scrollbar { display: none;} }  .groups-button {min-width: 8.242052082em;   flex: 0 0 auto; /* ← 核心！等价于 flex-shrink: 0 + flex-grow: 0 + flex-basis: auto */   display: flex;   align-items: center;   justify-content: center;   height: 100%;   padding: 0 1.2em; /* 建议用 padding 替代纯 width 控制内边距 */}  .groups-button p {margin: 0;   text-align: center;   font: normal normal 600 1.38417em/1.1em "Titillium Web", sans-serif;   letter-spacing: 0.13px;   color: #000000;   white-space: nowrap; /* ← 关键！阻止文本换行，确保宽度由字符数决定 */   overflow: hidden;   text-overflow: ellipsis; /* 可选：超长文本显示省略号 */}

? 补充建议：

• 避免对 .div1 使用 width: 500px 这类绝对值——它在响应式场景下易失效；优先用 min-width: fit-content 或 min-width: max-content，让容器“尽可能窄但不裁剪内容”；
• 若按钮数量动态变化，可结合 useRef + getBoundingClientRect() 在 JS 中动态计算总宽度并设置 .div1 的 minWidth，实现精准自适应；
• 移动端需额外添加 touch-action: pan-x 提升滚动流畅度。

最终效果：无论 groups 数组多长，每个按钮都紧密包裹文字、不换行、不溢出，父容器自动出现横向滚动条，用户体验一致稳定。