如何实现 Flex 水平布局中左侧自适应滚动、右侧固定宽度的响应式设计-html教程-PHP中文网

如何实现 Flex 水平布局中左侧自适应滚动、右侧固定宽度的响应式设计

本文详解如何使用 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 变化。