在网页布局场景中，左右分栏且两侧边框高度一致、随内容自动延伸是常见需求，使用CSS Flex布局可以高效实现这个效果，不需要复杂的计算或额外的DOM结构。
核心实现思路
Flex布局的核心是通过设置容器为flex容器，让子元素自动填充剩余空间，同时利用边框属性的特性，让边框随元素高度自动延伸。关键要点有两个：一是父容器开启flex布局，二是左右子元素设置合适的flex属性，确保两者高度同步。
基础实现示例
下面是一个左右分栏，两侧都有边框且同高自动延伸的基础实现代码：
/* 父容器开启flex布局 */
.flex-container {
display: flex;
width: 100%;
/* 可选：设置最小高度，避免内容过少时容器过矮 */
min-height: 200px;
}
/* 左侧区域 */
.left-panel {
width: 30%;
/* 右侧边框 */
border-right: 2px solid #e5e5e5;
padding: 20px;
/* 可选：设置背景色区分区域 */
background-color: #f8f8f8;
}
/* 右侧区域 */
.right-panel {
width: 70%;
padding: 20px;
/* 可选：左侧边框，和右侧边框呼应 */
border-left: 2px solid #e5e5e5;
}
对应的HTML结构如下：
<div class="flex-container">
<div class="left-panel">
<h3>左侧内容</h3>
<p>这里是左侧的内容，高度可能比较短。</p>
</div>
<div class="right-panel">
<h3>右侧内容</h3>
<p>这里是右侧的内容，内容比较多，高度会更高。</p>
<p>更多内容更多内容更多内容更多内容更多内容更多内容。</p>
<p>更多内容更多内容更多内容更多内容更多内容更多内容。</p>
</div>
</div>
原理说明
当父容器设置display: flex后，默认的子元素排列方向是水平方向，且子元素的align-items属性默认值为stretch，这个属性的作用就是让子元素的高度拉伸到和父容器高度一致。父容器的高度会被最高的子元素撑开，因此所有子元素都会和最高的子元素保持同高，设置在子元素上的边框自然就会自动延伸到整个高度，实现左右同高边框的效果。
适配不同场景的调整
需要中间分隔线的情况
如果只需要一条中间分隔线，不需要左右两侧都加边框，可以只给其中一个子元素加边框，或者给父容器加边框再配合overflow隐藏，示例代码如下：
.flex-container {
display: flex;
width: 100%;
min-height: 200px;
/* 父容器加边框，只显示右侧边框作为分隔线 */
border-right: 2px solid #e5e5e5;
/* 隐藏超出父容器的边框部分 */
overflow: hidden;
}
.left-panel {
width: 30%;
padding: 20px;
background-color: #f8f8f8;
}
.right-panel {
width: 70%;
padding: 20px;
/* 右侧区域背景色覆盖父容器的边框，只保留左侧的分隔线效果 */
background-color: #ffffff;
}
子元素需要独立滚动的情况
如果左右子元素内容都很多，需要各自独立滚动，只需要给子元素设置overflow-y: auto即可，此时边框依然会保持同高：
.flex-container {
display: flex;
width: 100%;
/* 固定父容器高度，避免无限延伸 */
height: 400px;
}
.left-panel {
width: 30%;
border-right: 2px solid #e5e5e5;
padding: 20px;
/* 内容超出时显示滚动条 */
overflow-y: auto;
}
.right-panel {
width: 70%;
padding: 20px;
overflow-y: auto;
}
注意事项
- 如果父容器没有设置明确的高度，且所有子元素高度都很小，那么容器高度会很矮，边框也会很短，此时可以设置
min-height保证最小高度。 - 如果子元素设置了
align-self: flex-start等覆盖align-items的属性，会导致子元素高度不再拉伸，无法实现同高效果，需要避免这类设置。 - 如果需要兼容旧版浏览器，需要添加对应的flex布局前缀，比如
-webkit-box、-moz-box等写法。