本文详解如何通过 flex-grow: 1 与 flex-shrink: 0 配合 overflow-x: auto，构建一个右侧宽度固定、左侧自动填充剩余空间并支持水平滚动的 Flex 布局，且在窗口缩放时保持稳定行为。
本文详解如何通过 `flex-grow: 1` 与 `flex-shrink: 0` 配合 `overflow-x: auto`，构建一个右侧宽度固定、左侧自动填充剩余空间并支持水平滚动的 flex 布局，且在窗口缩放时保持稳定行为。
要实现「左侧动态内容水平滚动 + 右侧固定宽度按钮列」的响应式 Flex 布局，核心在于正确分配弹性空间与精确控制溢出行为。原代码中 .rowLeft 未生效滚动，根本原因在于：它虽设置了 overflow-x: auto，但缺乏明确的尺寸约束（如 width 或 flex-basis），且未阻止其自身随内容无限伸展（flex-shrink: 0 仅防压缩，不设初始尺寸）。
✅ 正确解法如下：
-
.featureRow（主容器）：保持display: flex; flex-direction: row； -
.rowRight（右侧按钮列）：添加flex-shrink: 0+ 显式宽度（如width: 120px或min-width: 120px），确保其不被压缩，宽度恒定； -
.rowLeft（左侧滚动区）：- 移除
flex-shrink: 0（否则会抢占全部空间，无法留出滚动余量）； - 添加
flex-grow: 1，使其填充剩余空间； - 设置
min-width: 0（关键！防止 flex item 在 Chrome/Firefox 中因默认min-width: auto而拒绝收缩）； - 保留
display: flex; flex-direction: row和overflow-x: auto； - 内部子项（
.boxLeft）必须声明flex-shrink: 0（你已正确设置），确保盒子不被压缩。
- 移除
以下是优化后的完整 CSS（兼容现代浏览器，含响应式增强）：
.featureWrap {
display: flex;
flex-direction: column;
margin: 30px;
}
.featureRow {
display: flex;
flex-direction: row;
padding: 5px;
border: solid 1px rgb(236, 158, 40);
margin: 10px 0;
}
.rowLeft {
display: flex;
flex-direction: row;
flex-grow: 1; /* 占据剩余所有宽度 */
min-width: 0; /* 关键：允许 flex item 收缩到内容宽度以下 */
padding: 5px;
border: solid 1px rgb(83, 176, 230);
overflow-x: auto; /* 启用水平滚动 */
/* 可选：隐藏滚动条（保持简洁 UI） */
scrollbar-width: none; /* Firefox */
}
.rowLeft::-webkit-scrollbar { display: none; } /* Chrome/Safari */
.rowRight {
display: flex;
flex-direction: column;
flex-shrink: 0; /* 禁止压缩 */
width: 120px; /* 显式固定宽度（或使用 min-width: 120px） */
padding: 5px;
border: solid 1px rgb(51, 212, 64);
}
.boxLeft {
width: 100px;
height: 20px;
background-color: rgb(152, 215, 226);
border: solid 1px #555;
flex-shrink: 0; /* 确保盒子不随容器缩小 */
margin-right: 8px; /* 可选：增加间距 */
}
.boxRight {
width: 100px;
height: 20px;
background-color: greenyellow;
border: solid 1px #555;
margin-bottom: 8px; /* 垂直间距 */
}? 关键注意事项：
立即学习“前端免费学习笔记（深入）”；
-
min-width: 0是解决“不滚动”问题的最常见遗漏点——Flex 默认对 item 施加min-width: auto，导致即使有overflow也无法触发滚动； - 避免给
.rowLeft设置width: 100%或flex-basis: 100%，这会破坏 flex 分配逻辑； - 若需在小屏下隐藏右侧按钮或调整宽度，可结合媒体查询（如
@media (max-width: 768px) { .rowRight { display: none; } }）； - 水平滚动体验优化：添加
scroll-behavior: smooth到.rowLeft，或使用scroll-snap-type: x mandatory配合scroll-snap-align: start实现卡片对齐。
此方案完全响应式：当浏览器窗口缩放时，.rowLeft 动态重算可用宽度，自动启用/禁用滚动条，且 .boxLeft 始终保持 100px 宽度不变，完美满足动态增删、固定尺寸、水平滚动、自适应三大需求。
