こういう構造で

<div class="a">
	<div class="b1">message</div>
	<div class="b2">
		<div class="c1">message</div>
		<div class="c2">
			<div class="d1">message</div>
			<div class="d2">
				<div class="e1">message</div>
				<div class="e2">
					spread max
				</div>
			</div>
		</div>
	</div>
</div>

外側の a はサイドバーみたいなもので ウィンドウサイズに応じて高さが変わって 子孫要素の大きさは関係なく親に応じてサイズが変わる
そのときに一番深い e2 の div が下の隙間いっぱいに広がってほしい

高さ固定は無理だし JavaScript でリサイズごとに高さ指定もしたくない
となると CSS で全部 flexbox 化するしかなさそう

.a, .b2, .c2, .d2 {
	display: flex;
	flex-flow: column nowrap;
}

.b2, .c2, .d2, .e2 {
	flex: 1 1 auto;
}

むやみに flexbox 増やすと思わぬ動きしたり困ること多いし もっと楽で良い方法ってないものかなー
e2 を広げる以外に b2, c2, d2 を flexbox にする必要ないんだけど