嵌套全屏高度CSS Flexbox列布局滚动行为异常问题

我想要实现一个全屏高度的布局——顶部保留若干固定标题栏，只有下方的整个区域可滚动。用表格或绝对定位能实现这个效果，但Flexbox是更现代的解决方案。扁平结构的纵向Flexbox（包含三个div，最后一个设置flex: 1; overflow: auto）可以正常工作，但使用嵌套Flexbox时，始终会出现页面整体滚动条，而非主内容区域单独滚动。

正常工作的扁平Flexbox布局结构 #

结构层级：

outer
    b1
    b2
    b3

CSS代码 #

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

.outer {
  background: white;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.b1 {
  background: lightblue;
}

.b2 {
  background: pink;
}

.b3 {
  flex: 1;
  background: green;
  overflow: auto;
}

HTML代码 #

<div class='outer'>
  <div class='b1'>
    b1
  </div>
  <div class='b2'>
    b2
  </div>
  <div class='b3'>
    b3<br/> b3
    <br/> b3
    <br/> b3
    <br/> b3
    <br/> b3
    <br/> b3
    <br/> b3
    <br/> b3
    <br/> b3
    <br/> b3
    <br/>
  </div>
</div>

无法正常工作的嵌套Flexbox布局结构 #

结构层级：

outer
    a1
    a2
        b1
        b2

CSS代码 #

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

.outer {
  background: white;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.a1 {
  background: lightblue;
}

.a2 {
  flex: 1;
  background: green;
  display: flex;
  flex-direction: column;
}

.b1 {
  background: pink;
}

.b2 {
  flex: 1;
  background: yellow;
  overflow: auto;
}

HTML代码 #

<div class='outer'>
  <div class='a1'>
    a1
  </div>
  <div class='a2'>
    <div class='b1'>
      b1
    </div>
    <div class='b2'>
      b2<br/> b2
      <br/> b2
      <br/> b2
      <br/> b2
      <br/> b2
      <br/> b2
      <br/> b2
      <br/> b2
      <br/> b2
      <br/> b2
      <br/>
    </div>
  </div>
</div>

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