本文详解如何使用 css flexbox 构建一个响应式水平布局：左侧容器容纳等宽不可缩放的子元素并支持水平滚动，右侧为固定宽度（不随窗口缩放）的垂直按钮组，整体在浏览器缩放时保持功能完整。
本文详解如何使用 css flexbox 构建一个响应式水平布局：左侧容器容纳等宽不可缩放的子元素并支持水平滚动，右侧为固定宽度（不随窗口缩放）的垂直按钮组，整体在浏览器缩放时保持功能完整。
要实现“左侧动态内容水平滚动 + 右侧固定功能区”的 Flex 布局，核心在于精确控制 flex 项的伸缩行为与溢出处理，而非简单套用 overflow-x: auto。原代码中 .rowLeft 未生效滚动，根本原因在于：它虽设了 overflow-x: auto，但缺乏明确的宽度约束和正确的 flex 分配逻辑——在父容器 .featureRow 中，.rowLeft 默认 flex: 0 1 auto，无法主动抢占剩余空间，导致其实际宽度超出视口时仍不触发滚动。
✅ 正确解法如下：
-
父容器
.featureRow设为display: flex（已正确）； -
右侧
.rowRight显式设置固定宽度（如width: 160px）并禁用收缩：flex-shrink: 0； -
左侧
.rowLeft启用弹性增长并限制最小宽度：flex: 1; min-width: 0（关键！min-width: 0允许其在空间不足时压缩，从而触发overflow）； -
内部子项
.boxLeft必须设flex-shrink: 0+ 固定宽高，防止被压缩； -
.rowLeft需启用overflow-x: auto且移除white-space: nowrap干扰（Flex 默认已行内排列）。
以下是优化后的完整 CSS（适配原 HTML 结构）：
.featureWrap {
display: flex;
flex-direction: column;
margin: 30px;
}
.featureRow {
display: flex;
padding: 5px;
border: solid 1px rgb(236, 158, 40);
margin: 10px 0;
}
.rowLeft {
display: flex;
flex: 1; /* 占据剩余所有空间 */
min-width: 0; /* 关键：允许 flex 项压缩至 0，使 overflow 生效 */
padding: 5px;
border: solid 1px rgb(83, 176, 230);
overflow-x: auto; /* 横向滚动 */
overflow-y: hidden; /* 隐藏纵轴滚动条（可选） */
scrollbar-width: thin; /* Firefox 美化 */
}
.rowRight {
display: flex;
flex-direction: column;
width: 160px; /* 显式固定宽度（非百分比/viewport 单位，确保稳定） */
flex-shrink: 0; /* 禁止压缩 */
padding: 5px;
border: solid 1px rgb(51, 212, 64);
}
.boxLeft {
width: 100px;
height: 20px;
flex-shrink: 0; /* 核心：禁止子项缩放 */
background-color: rgb(152, 215, 226);
border: solid 1px #555;
margin-right: 8px; /* 可选：添加间距 */
}
.boxRight {
width: 100px;
height: 20px;
background-color: greenyellow;
border: solid 1px #555;
margin-bottom: 4px; /* 垂直按钮间距 */
}? 关键注意事项：
- ❌ 避免对
.rowLeft使用flex-shrink: 0（原代码错误），否则它会拒绝收缩，overflow失效； - ✅
min-width: 0是 Flex 容器内触发滚动的隐藏开关，尤其在嵌套 Flex 或存在flex: 1时必不可少； - ? 响应式保障：因
.rowRight使用固定像素宽度（如160px），而.rowLeft使用flex: 1，窗口缩放时左侧自动重算可用宽度，滚动行为始终有效； - ? 若需兼容旧版 Safari，可补充
-webkit-overflow-scrolling: touch到.rowLeft； - ? 进阶提示：JavaScript 动态增删
.boxLeft时，无需操作样式——Flex 布局与overflow会自动响应 DOM 变化。
此方案已在现代浏览器（Chrome/Firefox/Safari/Edge）中验证通过，完美支持用户拖拽滚动、鼠标滚轮、触摸板惯性滑动及窗口 resize 重排，满足生产环境对稳定性与可维护性的双重要求。
