Flexbox中可调整大小容器偏向一侧的纯CSS解决方案问询

DevOps 小满

2026-7-18

问题原因

你遇到的分隔线偏移问题，本质是flex布局的双向调整导致光标不同步：
两个pane都使用了flex:1 1 auto，这意味着它们既可以自动扩展填充空间，也会在空间不足时收缩。当拖动左侧pane的调整手柄时，浏览器会先修改左侧pane的宽度，随后立刻重新计算右侧pane的宽度来填满剩余空间。这种连续的双重调整，让调整手柄的位置无法跟光标同步，产生了"偏向右侧"的吸附感。

纯CSS修复方案

只需修改右侧pane的flex属性，让它只负责填充剩余空间、不再参与收缩，同时保留内容溢出滚动的功能：

div#main-panel {
  flex: auto;
}

.horizontal-container {
  display: flex;
  flex-flow: row nowrap;
}

.pane {
  overflow: auto;
  border: solid black;
}

.left-pane {
  min-width: 10%;
  max-width: 50%;
  border: solid red;
  resize: horizontal;
  flex: 1 1 auto; /* 初始状态下和右侧pane均分空间 */
}

.secondary-pane {
  flex: 1 0 0%; /* 仅填充剩余空间，禁止收缩 */
}

核心修改点：

给.secondary-pane设置flex:1 0 0%：
- flex-grow:1：确保右侧pane始终填满容器剩余空间；
- flex-shrink:0：禁止右侧pane在左侧调整时收缩，避免flex布局的双重计算；
- flex-basis:0%：让flex布局以0为基准分配空间，保证初始状态下左右pane等宽。
保留.left-pane的resize属性和宽度限制，确保调整范围符合需求；
.pane的overflow:auto依然生效，内容过长时自动出现滚动条，不会溢出父容器。