在网页前端开发中，经常需要实现两侧列固定宽度，中间列占据剩余空间且内容超出时可滚动的布局效果，这种需求使用Flex弹性布局可以很方便地实现，不需要依赖复杂的浮动或者绝对定位计算。
实现核心思路
要实现固定两列、中间列滚动的效果，核心是把三列都作为Flex容器的子元素，通过Flex属性控制各列的尺寸表现：两侧列设置固定宽度且不收缩，中间列设置flex:1占据剩余空间，同时给中间列设置overflow-y:auto开启滚动。
Flex容器基础设置
首先需要一个横向排列的Flex容器，核心属性设置如下：
- display: flex：将容器设置为弹性布局
- flex-direction: row：子元素横向排列，这是默认值可以省略
- height：给容器设置明确的高度，否则中间列的滚动高度无法生效
子元素属性分配
三个子列的属性需要分别设置：
- 左侧列：设置固定宽度，同时设置
flex-shrink:0防止被压缩 - 右侧列：同样设置固定宽度，
flex-shrink:0防止被压缩 - 中间列：设置
flex:1占据剩余空间，同时设置overflow-y:auto当内容超出高度时显示滚动条
完整代码示例
下面是一个可以直接运行的完整示例，容器高度设置为500px，左右列固定200px宽度，中间列内容超出时会出现纵向滚动条：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex固定两列中间滚动</title>
<style>
/* 重置默认边距 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Flex容器样式 */
.flex-container {
display: flex;
height: 500px; /* 容器固定高度，中间列滚动需要依赖这个高度 */
width: 100%;
}
/* 左侧固定列 */
.left-col {
width: 200px;
flex-shrink: 0; /* 禁止收缩，保证宽度固定 */
background-color: #f0f0f0;
padding: 20px;
}
/* 中间滚动列 */
.middle-col {
flex: 1; /* 占据剩余所有空间 */
overflow-y: auto; /* 内容超出时显示纵向滚动条 */
background-color: #ffffff;
padding: 20px;
}
/* 右侧固定列 */
.right-col {
width: 200px;
flex-shrink: 0; /* 禁止收缩，保证宽度固定 */
background-color: #f0f0f0;
padding: 20px;
}
/* 中间列内容样式，用于测试滚动效果 */
.content-item {
height: 80px;
line-height: 80px;
text-align: center;
margin-bottom: 10px;
background-color: #e8f4ff;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="left-col">
<p>左侧固定列</p>
<p>宽度：200px</p>
</div>
<div class="middle-col">
<p>中间滚动列，内容超出容器高度会出现滚动条</p>
<!-- 生成多个内容块测试滚动效果 -->
<div class="content-item">内容块1</div>
<div class="content-item">内容块2</div>
<div class="content-item">内容块3</div>
<div class="content-item">内容块4</div>
<div class="content-item">内容块5</div>
<div class="content-item">内容块6</div>
<div class="content-item">内容块7</div>
<div class="content-item">内容块8</div>
</div>
<div class="right-col">
<p>右侧固定列</p>
<p>宽度：200px</p>
</div>
</div>
</body>
</html>
注意事项
实际开发中使用这种布局时，有几个细节需要注意：
- Flex容器必须设置明确的高度，否则中间列的
overflow-y:auto无法生效，因为浏览器不知道内容的溢出边界 - 两侧固定列如果不设置
flex-shrink:0，当中间列内容过少时，两侧列可能会被压缩，导致宽度不符合预期 - 如果需要中间列横向滚动，可以将
overflow-y:auto替换为overflow-x:auto，同时中间列的内容需要设置不换行或者固定宽度 - 这种布局在IE10及以上版本都支持，如果需要兼容更老的浏览器，建议提前确认Flex布局的兼容性情况
扩展场景
这种布局还可以做很多扩展调整，比如：
- 把两侧列改成顶部和底部固定，中间内容滚动，只需要把Flex容器改为纵向排列，设置
flex-direction:column即可 - 固定列的宽度可以用百分比代替固定像素，适配不同屏幕尺寸的布局需求
- 给滚动列添加
scroll-behavior:smooth属性，实现平滑滚动的效果