如何使用 CSS Flexbox 实现固定右侧、左侧水平滚动的响应式布局-html教程-PHP中文网

如何使用 CSS Flexbox 实现固定右侧、左侧水平滚动的响应式布局

本文详解如何通过 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（兼容现代浏览器，含响应式增强）：

CSS工具箱(专业版)

全功能 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 实现卡片对齐。