四象限加侧边栏是一个经典的后台页面结构：左侧一条侧边栏放导航，右边的主区域切分成两行两列共四个面板，常见于运维监控大屏、视频监控墙、BI数据看板等场景。用Flexbox来做这种布局比传统的浮动加定位干净得多，但实际写起来容易遇到两个麻烦：一是子项的高度怎么都撑不满，二是莫名其妙出现滚动条。这篇文章就把布局结构和滚动条问题一次讲清楚。
四象限加侧边栏的Flexbox结构设计
整体思路是三层嵌套。最外层是一个横向的flex容器，包含侧边栏和主区域两部分；主区域再作为一个纵向的flex容器，分成上下两行；每一行又是一个横向flex容器，分成左右两个面板。这样层层拆解之后，四象限其实就变成了三个普通的两分结构，理解起来简单，代码也容易维护。
先看基础的HTML结构，语义上用aside表示侧边栏，main里嵌套两行，每行放两个面板：
<div class="layout">
<aside class="sidebar">侧边栏</aside>
<main class="main">
<div class="row">
<section class="panel">面板一</section>
<section class="panel">面板二</section>
</div>
<div class="row">
<section class="panel">面板三</section>
<section class="panel">面板四</section>
</div>
</main>
</div>对应的CSS核心代码如下，注意侧边栏用flex: 0 0 240px锁死宽度，主区域用flex: 1占满剩余空间：
html, body {
height: 100%;
margin: 0;
}
.layout {
display: flex;
height: 100vh; /* 整体占满视口高度 */
}
.sidebar {
flex: 0 0 240px; /* 不放大、不缩小、固定240px */
background: #2d3a4b;
color: #fff;
}
.main {
flex: 1; /* 占据剩余宽度 */
display: flex;
flex-direction: column; /* 纵向排列两行 */
min-width: 0; /* 关键：允许收缩，防止溢出 */
}
.row {
flex: 1; /* 两行平分高度 */
display: flex;
min-height: 0; /* 关键：允许纵向收缩 */
}
.panel {
flex: 1; /* 两个面板平分宽度 */
margin: 4px;
background: #f5f7fa;
border: 1px solid #e4e7ed;
overflow: auto; /* 内容超出时面板内部滚动 */
}这段代码里最值得注意的是height: 100vh的用法。只有外层容器有了确定的高度，内部的flex子项按比例分配高度才有意义。很多初学者发现flex: 1不生效，行的高度死活不变，追根溯源就是最外层没有设置高度，导致百分比和比例分配失去了参照物。
滚动条溢出的三大元凶及解决办法
第一个元凶是flex子项的默认最小尺寸。CSS规范规定，flex项的min-width默认值是auto，意味着它不会收缩到比内容的最小宽度更小。当面板里放了一个长表格或者一长串不换行的文字时，面板的实际宽度就会超出容器，页面底部出现横向滚动条。解决办法就是上面代码里写的min-width: 0，纵向布局则对应min-height: 0。这一行代码能解决大概八成的Flexbox溢出问题。
第二个元凶是margin和border造成的尺寸溢出。四象限的每个面板如果都用width: 50%加间距的传统写法，总宽度很容易超出100%。而Flexbox方案里，面板用flex: 1分配的是剩余空间，间距部分已经被自动扣除了，所以不会溢出。如果仍然出现滚动条，检查一下是否给面板同时设置了固定的width或height，把它们去掉，交给flex去分配即可。另外可以给外层容器加box-sizing: border-box，确保border和padding计算在尺寸内部。
第三个元凶是overflow的设置位置。正确的做法是把滚动限制在每个面板内部，也就是给.panel设置overflow: auto，而外层的.layout、.main、.row都保持默认或者显式设置overflow: hidden。有些人图省事直接在body上设overflow: hidden来隐藏滚动条，这会导致内容被裁切而无法查看，是治标不治本的做法。滚动的粒度应该是面板级别：哪个面板内容多，哪个面板内部出滚动条，页面整体始终不动。
如果希望滚动条不占布局空间，可以配合自定义滚动条样式进一步优化：
.panel::-webkit-scrollbar {
width: 6px;
}
.panel::-webkit-scrollbar-thumb {
background: #c0c4cc;
border-radius: 3px;
}
.panel {
scrollbar-width: thin; /* Firefox下的细滚动条 */
}小屏幕下的响应式降级处理
四象限布局在宽屏上很好用，但到了手机上，两列两格会把每个面板压得非常窄，基本没法看。合理的做法是通过媒体查询降级：窄屏下取消侧边栏和四象限，改成单列纵向排列，侧边栏变成顶部横条或者抽屉式菜单。
@media (max-width: 768px) {
.layout {
flex-direction: column; /* 整体改为纵向 */
height: auto; /* 释放高度限制，页面整体滚动 */
}
.sidebar {
flex: none;
width: 100%;
height: 56px; /* 变成顶部导航条 */
}
.main {
min-width: 0;
}
.row {
flex-direction: column; /* 每行内部也改为纵向 */
}
.panel {
min-height: 240px; /* 给面板一个最小高度保证可读性 */
}
}这里有个细节值得展开：窄屏下把height: 100vh改成了auto。因为移动端用户的习惯是整页滚动，如果还锁死视口高度，内容全挤在面板内部的小滚动区域里，操作会非常别扭。降级之后滚动权交还给页面本身，每个面板给一个最小高度，内容自然向下延伸，这才是符合直觉的移动端体验。另外768px这个断点可以根据实际内容调整，如果面板里放的是视频流，断点可以放宽到992px，保证每个画面仍有足够的可视面积。
总结一下，四象限加侧边栏的Flexbox实现抓住三个要点：外层容器给确定高度、子项全部用flex比例分配尺寸并重置min宽高为0、滚动限制在面板内部。把这三点落实到位，再配合媒体查询做窄屏降级，这套布局就能稳定地跑在各种尺寸的屏幕上，不需要借助任何第三方栅格库。