当父容器启用水平滚动时，内部按钮因弹性布局限制无法随文本内容自适应宽度，导致文字溢出；通过显式设置父容器宽度并配合 white-space: nowrap 和 flex-shrink: 0，可确保按钮正确包裹文本并支持滚动浏览。
在 React + CSS 的实际开发中，你遇到的问题本质是 Flex 容器在启用了 overflow-x: scroll 后，其子项（按钮）仍受默认 flex 缩放行为影响，导致 min-width 生效但 width: fit-content 失效，文本被迫换行或溢出。
仅给 .div1 添加固定宽度（如 width: 500px）虽能临时缓解，但不具备响应性与可维护性，且未解决根本原因。更健壮的解决方案如下：
✅ 正确做法：控制 Flex 行为 + 文本防换行
.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;
/* 关键：禁止容器被内容撑宽，同时允许滚动 */
white-space: nowrap; /* 防止子项因换行破坏宽度计算 */
}
.groups-button {
min-width: 8.242052082em;
display: inline-flex; /* 改为 inline-flex，更好兼容 white-space */
align-items: center;
justify-content: center;
height: 100%;
flex-shrink: 0; /* ? 核心！禁止按钮在滚动容器中被压缩 */
padding: 0 1.2em; /* 可选：增强可点击区域 */
}
.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; /* ? 确保文本不换行，宽度由内容决定 */
/* 移除 width: fit-content —— flex 容器中它常被忽略，由内容自然撑开即可 */
}? 补充说明：
- flex-shrink: 0 是关键：它阻止按钮在有限空间内被 Flex 布局强制缩小，从而让 min-width 和文本真实宽度共同决定最终尺寸；
- white-space: nowrap 必须同时作用于 .div1（防止 flex 换行）和
（防止文本折行），否则 fit-content 逻辑失效；
- 使用 overflow-x: auto 替代 scroll，避免在无需滚动时仍显示空白滚动条；
- 若需隐藏滚动条但保留功能（如题中所示），保留 -ms-overflow-style: none 和 scrollbar-width: none 即可，现代浏览器也支持 ::-webkit-scrollbar { display: none; }。
✅ 最终效果：
按钮宽度将严格跟随 group.name 文本长度动态伸缩（不低于 min-width），父容器保持固定高度、横向可滚动，无文字截断或溢出，适配不同长度的组名（如 “Admin” vs “User Management Dashboard”）。
⚠️ 注意：避免对 .div1 设置过小的 width（如硬编码 500px），这会破坏响应式表现。应优先使用 max-width 或结合 vw/rem 单位做弹性约束，必要时配合 @media 断点优化。
