在Web前端开发中，Flex布局是处理页面元素排列的常用方案，而实现可滚动、自适应且不超出父容器边界的Flex布局，需要合理搭配Flex相关属性与尺寸、溢出控制属性，下面我们逐步讲解实现方法。
核心实现思路
要实现目标效果，需要明确三个核心点：父容器需要给Flex子容器明确的尺寸约束，Flex子容器需要设置合适的Flex属性实现自适应，同时需要给内容区域设置溢出滚动属性。三者的配合才能保证布局符合预期。
父容器设置
父容器需要定义明确的尺寸，作为Flex子容器的尺寸参考基准，避免Flex子容器因为没有参照而出现尺寸异常。通常可以给父容器设置固定的宽高，或者使用相对单位让其跟随外层容器自适应。
/* 父容器基础样式 */
.parent-container {
width: 100%;
height: 500px;
border: 1px solid #e5e5e5;
/* 父容器也可以根据自身需求设置其他布局属性 */
}
Flex子容器设置
Flex子容器需要设置display: flex开启Flex布局，同时通过flex属性控制自身的自适应行为，并且不能设置固定的宽高超出父容器范围。
/* Flex子容器基础样式 */
.flex-container {
display: flex;
/* flex: 1 1 auto 表示子容器可以根据父容器剩余空间自适应伸缩 */
flex: 1 1 auto;
/* 防止子容器因为内容过大超出父容器 */
max-width: 100%;
max-height: 100%;
/* 设置Flex子元素排列方向，此处为纵向排列 */
flex-direction: column;
}
可滚动内容区域设置
需要在Flex子容器内部单独设置一个内容容器，用来承载实际内容，并且给这个容器设置溢出滚动属性，当内容超出容器高度时就会出现滚动条。
/* 可滚动内容区域样式 */
.scroll-content {
/* 让内容区域占据Flex子容器的剩余空间 */
flex: 1 1 auto;
/* 内容超出时出现垂直滚动条，水平方向不滚动 */
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
}
完整代码示例
下面是完整的HTML和CSS代码，可以直接复制到本地运行查看效果，内容区域添加足够多的内容后就会出现滚动条，且整个布局不会超出父容器边界。
<!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>
.parent-container {
width: 100%;
height: 500px;
border: 1px solid #e5e5e5;
padding: 20px;
box-sizing: border-box;
}
.flex-container {
display: flex;
flex: 1 1 auto;
max-width: 100%;
max-height: 100%;
flex-direction: column;
background-color: #f5f5f5;
border-radius: 8px;
}
.flex-header {
padding: 16px;
background-color: #1890ff;
color: #fff;
text-align: center;
}
.scroll-content {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
}
.content-item {
padding: 12px;
margin-bottom: 8px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="parent-container">
<div class="flex-container">
<div class="flex-header">Flex布局头部</div>
<div class="scroll-content">
<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 class="content-item">内容项9</div>
<div class="content-item">内容项10</div>
<div class="content-item">内容项11</div>
<div class="content-item">内容项12</div>
</div>
</div>
</div>
</body>
</html>
常见问题说明
- 如果Flex子容器仍然超出父容器，检查是否给Flex子容器设置了固定的宽高，或者没有设置
max-width和max-height属性。 - 如果内容区域没有滚动效果，检查是否给内容区域设置了
overflow-y: auto，同时内容区域的高度是否被子元素撑开超出了容器范围。 - 如果Flex子容器的自适应效果不符合预期，调整
flex属性的三个值，第一个值表示放大比例，第二个值表示缩小比例，第三个值表示初始大小。