◆ flex: 1 1 0 で広がってくれない
  ◆ overflow: auto ついてると広がらなくなるよう
◆ flex-basis を auto にすると親に合わせて縮まないのでだめ
◆ 親のサイズを事前に確保しておくと広がるけど それだと中身のサイズにならない
  ◆ 下に隙間ができる

こんなページがあります

<!doctype html>

<style>
.root {
display: block;
width: 800px;
height: 600px;
background: #ffc6c8;
margin: auto;
}

.container {
display: flex;
flex-flow: column nowrap;
margin: 0 20px;
}

.navi {
display: flex;
flex: none;
padding: 0 15px;
background: #fff8f5;
margin-bottom: 2px;
}

.navi a {
margin: 5px;
padding: 3px 8px;
border-radius: 4px;
background: #aaf4fd;
color: #3568a7;
}

.body {
display: flex;
flex-flow: column nowrap;
flex: 1 1 0;
overflow: auto;
background: #fff8f5;
}
</style>

<div class="root">
<div class="container">
<div class="navi">
<a href="">LINK1</a>
<a href="">LINK2</a>
</div>
<div class="body">
<div class="content">
<h1>aaaaa</h1>
</div>
</div>
</div>
</div>

.container の中に .navi と .body が縦に並びます
.navi はリンクが横に並んでるもので .body の中身は縦に長いときもあれば短いときもあります

やりたいことは .body の高さを必要最低限にして 長すぎる場合は overflow: auto でスクロールを出すというものです

現状では .body は表示されてません
height が 0 になっています

.body が自動で広がるように flex: 1 1 0 にしていますが overflow: auto と組み合わせるとダメのようです
0 から広がらなくなります

やりたいことを考えると普通に .navi と .body が縦に並べば良い 旧来の HTML と同じものです
なので .container から flex をはずしてしまうと一見うまく動きます
しかし そうすると flex による .body が .container をはみ出さないように調整してくれる部分が効かなくなります
.body が大きくなると使えません
.container に overflow: auto をつけたとしても .navi 部分もスクロールされることになるので求めているものにはなりません

.body の flex は 1 1 auto にして 0 から広げるという考え方にしています
これを auto にして実際の中身のサイズから必要なら縮めるようにするということも考えました
しかし auto にするとはみ出した場合に縮んでくれず .body が .container をはみ出します

.body が 0 から広がらないというのは .container の高さが確保されていないから広がりようがないというのが原因のようです
.container に height: 100% を指定すると .body は自動で .container いっぱいまで広がってはみ出たらスクロールバーが出ます
見つけた限りでは一番これが良い回避策ですが 解決策ではないです
.body の中身がちょっとしかない場合でも .container いっぱいまで広がってしまいます
.body の高さを必要最低限にする が満たせていません

flexbox は便利なようでときどきかゆいところに手が届かないのですよね
今回 .body が .container いっぱいまで広がって困る理由は見た目の背景色部分でした
これは .content のほうに背景色をつければ解決できます
.content は flex-grow が未設定なので .body いっぱいまで広がらないので中身のサイズになります
この例だとただの div なので HTML 構造も気軽に変更できそうですが 実際の環境だとこれらは CustomElement でライブラリ部分なので CSS 設定ならできるものの HTML 構造に手を加えるのは難しいのですよね