如何解决Flexbox内可调整大小的<div>拖动时跳动的问题

问题场景 #

在垂直方向的Flex容器内，第一个<div>需要支持垂直调整大小，第二个<div>填充容器剩余空间。当前代码在Chrome中正常，但Firefox和Edge拖动调整第一个<div>时会出现跳动现象。

问题原因 #

1. 父子元素同时启用Resize：容器本身也添加了resizable类，导致容器和子元素div1的resize逻辑冲突，浏览器计算尺寸时出现混乱。
2. 错误的高度设置：div2使用height: max-content，干扰了Flex布局的剩余空间分配逻辑，和div1的resize操作产生尺寸计算冲突。

修复方案 #

步骤1：移除容器的Resize属性 #

仅给需要调整大小的div1保留resizable类，避免容器和子元素的resize冲突。

步骤2：用Flex属性分配剩余空间 #

将div2的height: max-content替换为flex: 1，让它在Flex布局中自动填充容器剩余空间。

步骤3：优化Resize元素的尺寸限制（可选） #

给div1设置min-height和max-height，防止调整时超出合理范围，提升交互体验。

修复后的代码 #

CSS #

div {
  border: 1px solid black;
}

.container {
  display: flex;
  flex-direction: column;
  background: yellow;
  height: 200px;
  width: 150px;
}

#div1 {
  background: red;
  min-height: 40px; /* 限制最小高度，避免缩到看不见 */
  max-height: 160px; /* 限制最大高度，给div2留出基础空间 */
}

#div2 {
  background: lightblue;
  flex: 1; /* 关键：自动填充容器剩余空间 */
  overflow-y: scroll;
}

.resizable {
  resize: vertical;
  overflow: auto; /* 内容不足时隐藏滚动条，更美观 */
}

HTML #

<div class="container">
  <div id="div1" class="resizable">
    <p>Div 1</p>
  </div>
  
  <div id="div2">
    <p>Div 2</p>
    <p>Div 2</p>
    <p>Div 2</p>
    <p>Div 2</p>
  </div>
</div>

修复原理 #

• 移除容器的resize属性后，仅div1具备调整尺寸的能力，消除了父子元素的尺寸计算冲突，解决跳动问题。
• flex: 1是Flex布局中分配剩余空间的标准方式，替代height: max-content后，div2的尺寸会随div1的调整实时稳定更新。
• 限制div1的最小/最大高度，避免极端尺寸破坏整体布局的可用性。

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