結論
display: flex;
flex-direction: column;
flex-wrap: nowrap; ←こいつをつければOK
ざっくり何があったか
子要素が空なら高さ要らんやん。縦並びにするならflexも要らんやん。
まぁそれはごもっとも。
今カスタマイズしていたのは、はてなブログのアーカイブページの話。（このブログではない）
アーカイブページで表示される各記事のアイキャッチ、実はimgタグとかではなくdivの背景画像として出力されています。
なんで空のDOMなんですね。
そして画像のDOMは3番目に出力されるので、
・アイキャッチ
・記事タイトル
・投稿日
という順番で表示させたい場合は、absoluteを使うとかflexのorderを使うとかして、アイキャッチのDOMを一番上に持ってくる必要があります。
画像のDOMをorder : 0、他のDOMをorder : 1として設定することで、今回は一番最初に表示される様調整しました。
ところがどっこい、画像のDOMの高さがどう頑張っても確保されない。
・空のDOM
・縦並びのflex
・高さをパーセンテージやaspect-ratioで指定したい
こんな条件が合わさった結果、そんなことになっている様で。
こねくり回した結果、flex-wrap: nowrap;があれば高さ指定が可能になりました。
以上、対処法としてメモ！
