当父容器启用横向滚动时，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 数组多长，每个按钮都紧密包裹文字、不换行、不溢出，父容器自动出现横向滚动条，用户体验一致稳定。
