Flexbox布局下实现侧边栏独立滚动不撑开页面的方法

Flex 布局中，弹性子项的默认最小尺寸规则为min-height: auto（纵向Flex容器下）、min-width: auto（横向Flex容器下），即子项尺寸永远不会小于其内部内容的固有尺寸。
你的代码里，中间.content区域是纵向Flex容器.container的弹性子项，虽然设置了flex: 1 1 auto分配剩余空间，但默认min-height: auto的规则会让它被内部超高的侧边栏内容强行撑开，最终挤压页脚导致整页溢出，侧边栏设置的overflow: scroll也因为自身容器没有被限制最大高度，无法触发滚动。

只需要给受影响的弹性子项添加一行CSS覆盖默认最小尺寸规则即可：

• 给.container > .content选择器增加min-height: 0属性，允许该容器收缩到布局分配的可用空间大小，不会被内部内容撑开
• （可选优化）将侧边栏的overflow: scroll改为overflow: auto，仅在内容溢出时显示滚动条，内容不足时隐藏滚动条，体验更好
• （可选扩展）如果需要主内容区也支持独立滚动，给.page选择器同步加上min-height: 0和overflow: auto即可

CSS 部分 #

html,
body {
  height: 100%;
  margin: 0;
}

.block {
  border: 1px solid grey;
}

.container {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.container > .header {
  flex: 0 1 auto;
  height: 65px;
}

.container > .content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  /* 核心修复代码 */
  min-height: 0;
}

.container > .content > .page {
  flex: 1 1 auto;
}

.container > .content > .sidebar {
  flex: 0 1 auto;
  width: 250px;
  overflow: auto;
}

.container > .footer {
  flex: 0 1 auto;
  height: 150px;
}

HTML 部分 #

<body>
  <div class="container">
    <div class="block header">
      <p><b>Header</b></p>
    </div>
    <div class="content">
      <div class="block sidebar">
        <p><b>Sidebar</b></p>
        <div style="background-color: blue; height: 800px;"></div>
      </div>
      <div class="block page">
        <p><b>Content</b></p>
      </div>
    </div>
    <div class="block footer">
      <p><b>Footer</b></p>
    </div>
  </div>
</body>

修复后页面会完全占满视口高度，不会出现整页滚动，侧边栏内容溢出时只会在侧边栏内部出现滚动条，页脚和头部位置完全固定。

内容的提问来源于stack exchange，提问作者hockeyman