如何实现.parent高度匹配.left的左右等分自适应布局？

直接用Flex或Grid布局就能实现你要的效果，核心是让右侧元素高度匹配左侧内容高度，再给右侧添加滚动属性。

方案一：Flex布局实现（推荐） #

<div class="parent">
  <div class="left">
    <!-- 左侧内容，高度由自身内容撑开 -->
    <p>左侧内容行1</p>
    <p>左侧内容行2</p>
    <p>左侧内容行3</p>
  </div>
  <div class="right">
    <!-- 右侧超长内容，超出将显示滚动条 -->
    <p>右侧内容行1</p>
    <p>右侧内容行2</p>
    <p>右侧内容行3</p>
    <p>右侧内容行4</p>
    <p>右侧内容行5</p>
    <p>右侧内容行6</p>
    <p>右侧内容行7</p>
    <p>右侧内容行8</p>
  </div>
</div>

.parent {
  display: flex;
  align-items: flex-start; /* 让容器高度由左侧内容决定，而非拉伸容器 */
  border: 1px solid #ccc; /* 可选：方便查看布局范围 */
}

.left {
  flex: 0 0 50%; /* 固定占总宽度50%，不随内容伸缩 */
  padding: 10px;
  box-sizing: border-box;
  background-color: #f0f0f0;
}

.right {
  flex: 0 0 50%; /* 固定占总宽度50% */
  height: 100%; /* 强制继承父容器高度（即左侧内容高度） */
  padding: 10px;
  box-sizing: border-box;
  background-color: #e0e0e0;
  overflow-y: auto; /* 内容超出时显示垂直滚动条 */
}

方案二：Grid布局实现 #

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列各占一半宽度 */
  align-items: start; /* 容器高度由左侧内容撑开 */
  border: 1px solid #ccc;
}

.left {
  padding: 10px;
  box-sizing: border-box;
  background-color: #f0f0f0;
}

.right {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  background-color: #e0e0e0;
  overflow-y: auto;
}

关键要点说明 #

• 父容器设置align-items: start，避免默认的拉伸行为导致容器高度被内容多的一侧撑开。
• 左右两侧用固定宽度占比（Flex的flex:0 0 50%或Grid的1fr），确保各占总宽度一半。
• 右侧元素通过height:100%继承父容器高度（即左侧内容高度），配合overflow-y:auto实现滚动效果。

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