四象限Flexbox布局的常见异常场景
很多开发者在尝试用Flexbox实现四象限页面布局时，会采用外层flex容器嵌套四个区域子容器的结构，但是很容易出现两个典型问题：一是某个象限内容超出时，滚动条不出现或者出现多余的滚动条，二是四个象限的空间分配不符合预期，出现挤压或者留白过多的情况。
异常问题一：滚动条表现不符合预期
比如我们希望每个象限内部独立滚动，但是实际运行时要么整个页面出现滚动条，要么某个象限内容超出却没有滚动条，甚至滚动条出现后挤压了其他象限的空间。
异常问题二：空间分配错乱
设置的flex值明明是均分空间，但是实际渲染时某个象限被压缩得很小，或者出现大面积空白，调整内容后布局还会发生突变。
问题产生的核心原因
Flexbox默认收缩规则的影响
Flex子元素默认设置了flex-shrink:1，当父容器空间不足时，子元素会被自动收缩，这就可能导致我们设置的固定高度或者宽度失效，进而影响溢出和滚动的计算。
容器尺寸未正确约束
如果外层flex容器没有设置明确的高度，或者内部象限容器没有限制最小尺寸，浏览器会按照内容尺寸来分配空间，自然就打破了四象限均分的预期。
溢出属性设置不当
很多开发者只给象限容器设置了overflow:auto，但是没有给象限容器设置明确的高度，或者外层容器没有禁止收缩，就会导致溢出规则不生效。
对应的解决方案
1. 约束外层容器尺寸
首先给最外层的flex容器设置明确的高度，并且禁止它收缩，避免被内部内容撑开或者压缩。
/* 外层容器样式 */
.quadrant-container {
display: flex;
flex-wrap: wrap;
height: 100vh; /* 占满整个视口高度 */
min-height: 0; /* 覆盖默认的min-height:auto，避免内容撑开容器 */
}
2. 正确设置象限子元素规则
四个象限作为外层容器的子元素，需要设置flex值均分空间，同时禁止收缩，设置最小尺寸为0，避免内容影响空间分配。
/* 象限通用样式 */
.quadrant {
flex: 1 0 50%; /* 不收缩，基准宽度50%，两个一排形成四象限 */
min-width: 0; /* 防止内容撑开宽度 */
min-height: 0; /* 防止内容撑开高度 */
box-sizing: border-box; /* 边框和内边距计入宽高，避免溢出计算错误 */
overflow: auto; /* 内容超出时显示滚动条 */
border: 1px solid #e5e5e5;
}
3. 处理内容区域的溢出
如果象限内部还有嵌套的内容容器，需要给内容容器设置高度100%，确保溢出规则作用在正确的元素上。
/* 象限内部内容容器 */
.quadrant-content {
height: 100%;
padding: 16px;
}
完整示例代码
下面是一个可以直接运行的完整示例，实现了四个象限独立滚动，空间均分的效果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox四象限布局示例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
overflow: hidden;
}
.quadrant-container {
display: flex;
flex-wrap: wrap;
height: 100%;
min-height: 0;
}
.quadrant {
flex: 1 0 50%;
min-width: 0;
min-height: 0;
overflow: auto;
border: 1px solid #e5e5e5;
}
.quadrant-content {
height: 100%;
padding: 16px;
}
.long-content {
height: 2000px;
background: linear-gradient(#fff, #f5f5f5);
}
</style>
</head>
<body>
<div class="quadrant-container">
<div class="quadrant">
<div class="quadrant-content">
<h3>象限一</h3>
<div class="long-content"></div>
</div>
</div>
<div class="quadrant">
<div class="quadrant-content">
<h3>象限二</h3>
<div class="long-content"></div>
</div>
</div>
<div class="quadrant">
<div class="quadrant-content">
<h3>象限三</h3>
<div class="long-content"></div>
</div>
</div>
<div class="quadrant">
<div class="quadrant-content">
<h3>象限四</h3>
<div class="long-content"></div>
</div>
</div>
</div>
</body>
</html>
注意事项
- 如果象限内部有固定高度的元素，需要确认该元素的高度不会超过象限容器的高度，否则还是会出现滚动异常。
- 如果需要动态调整象限的尺寸，不要直接修改flex值，可以通过调整外层容器的flex-wrap规则或者给象限添加不同的class来实现。
- 在移动端场景下，需要额外测试滚动条的触摸滑动行为，避免出现滚动卡顿的问题。