CSS Flex Row左侧元素水平滚动实现问题求助

需求说明 #

• 右侧为固定宽度的堆叠按钮区域，宽度不随窗口变化
• 左侧为可动态增删的固定宽度盒子列表，超出剩余空间时水平滚动
• 整体布局支持浏览器窗口缩放自适应

原问题代码 #

HTML代码 #

<div class="featureWrap">
  ROW 1
  <div class="featureRow">
    <div class="rowLeft">
      <div class="boxLeft">box 1</div>
      <div class="boxLeft">box 2</div>
      <div class="boxLeft">box 3</div>
    </div>
    <div class="rowRight">
      <div class="boxRight">button 1</div>
      <div class="boxRight">button 2</div>
    </div>
  </div>
  ROW 2 - overflows remaining space
  <div class="featureRow">
    <div class="rowLeft">
      <div class="boxLeft">box 1</div>
      <div class="boxLeft">box 2</div>
      <div class="boxLeft">box 3</div>
      <div class="boxLeft">box 4</div>
      <div class="boxLeft">box 5</div>
      <div class="boxLeft">box 6</div>
      <div class="boxLeft">box 7</div>
      <div class="boxLeft">box 8</div>
      <div class="boxLeft">box 9</div>
    </div>
    <div class="rowRight">
      <div class="boxRight">button 1</div>
      <div class="boxRight">button 2</div>
    </div>
  </div>
</div>

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-shrink: 0;
  padding: 5px;
  border: solid 1px rgb(83, 176, 230);
  overflow-x: auto;
}

.rowRight {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: solid 1px rgb(51, 212, 64);
}

.boxLeft {
  width: 100px;
  height: 20px;
  background-color: rgb(152, 215, 226);
  border: solid 1px #555;
}

.boxRight {
  width: 100px;
  height: 20px;
  background-color: greenyellow;
  border: solid 1px #555;
}

问题分析与修改方案 #

原代码核心问题：

• .rowLeft设置flex-shrink: 0后不会收缩，反而撑开父容器，无法触发内部滚动
• 右侧.rowRight未设置宽度保护，窗口缩小时可能被挤压

修改要点：

1. 给.rowRight添加flex-shrink: 0，确保其固定宽度不被压缩
2. 调整.rowLeft属性：设置flex: 1使其占据父容器剩余空间，移除flex-shrink: 0，添加min-width: 0（突破flex元素默认最小内容宽度限制，允许收缩至小于内部内容宽度）
3. 给.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: 1; /* 占据剩余空间 */
  min-width: 0; /* 允许收缩到小于内部内容宽度 */
  padding: 5px;
  border: solid 1px rgb(83, 176, 230);
  overflow-x: auto; /* 内容超出时水平滚动 */
}

.rowRight {
  display: flex;
  flex-direction: column;
  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: 4px; /* 可选：添加盒子间距，提升视觉效果 */
}

.boxRight {
  width: 100px;
  height: 20px;
  background-color: greenyellow;
  border: solid 1px #555;
  margin-bottom: 4px; /* 可选：添加按钮间距 */
}

效果验证 #

修改后，左侧盒子列表在超出剩余空间时自动显示水平滚动条，右侧按钮区域保持固定宽度，整体布局随窗口缩放自适应，动态增删盒子时也能正常触发滚动。

内容的提问来源于stack exchange，提问作者J King