階層の深いところで画面サイズに合わせてoverflow:scrollさせる

固定長ヘッダー付きの領域を階層構造にして内側の窓でスクロールしたい

<div class="outer">
  <div class="header">aaa</div>
  <div class="content">
    <div class="inner-outer">
      <div class="inner-header">aaa</div>
      <div class="inner-content">
bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb<br>bbb
      </div>
    </div>
  </div>
</div>

header、inner-headerのheightは固定長
inner-contentの大きさをウィンドウの残りの高さでスクロールさせたい

html {
  width:100%;
  height:100%;

  body {
    width:100%;
    height:100%;
    margin: 0;

    .outer {
      display: flex;
      flex-direction: column;
      height:100%;

      .header {
        flex-grow: 0;
      }

      .content {
        flex-grow: 1;
        overflow-y: hidden;

        .inner-outer {
          display: flex;
          flex-direction: column;
          height: 100%;

          .inner-header {
            flex-grow: 0;
          }

          .inner-content {
            flex-grow: 1;
            overflow-y: scroll;
          }
        }
      }
    }
  }
}

flex-grow と overflow: hidden; を使うとうまくいく。