如何让可滚动div高度与同级div保持一致？

需求与问题 #

页面包含两个同级div：

• 左侧div高度随自身内容自适应
• 右侧div需与左侧保持高度一致（滚动页面时底部始终对齐），且因内部元素较多需支持垂直滚动

当前困境：开启滚动需要设置height属性，但固定height无法匹配左侧div的动态高度。

解决方案代码 #

修改后的CSS代码如下：

.header {
  height: 50px;
  border: 1px solid red;
}

.parent {
  display: flex;
  gap: 20px;
}

.left {
  width: 50%;
}

.right {
  overflow-y: auto;
  width: 50%;
}

li {
  height: 100px;
  background: pink;
}

核心原理 #

1. Flex布局默认特性：父容器设置display: flex后，子元素会自动拉伸至与最高子元素（左侧自适应div）同高，无需额外设置固定高度
2. 滚动触发逻辑：给右侧div添加overflow-y: auto，当内部内容高度超过Flex分配的高度时，自动显示垂直滚动条
3. 移除高度限制：删除原代码中max-height: 100vh，避免强行限制右侧div高度，确保其完全跟随左侧高度动态变化

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