サイズ可変の親要素の高さいっぱいまで子要素を引き伸ばしたい

とりあえず下の画像を見ていただきたいのですが、許し難いこの状況。

横並びにしたボックスの、子要素（ピンク色の背景）の高さを左右できっちり揃えたい！

HTML

<div class="parent">
    <div class="child">文章</div>
</div>

親要素の高さがheight:~~px;で固定できるなら子要素にheight:100%;すればいいだけですが、
今回は親要素をFlexboxでリキッドデザインに対応させており、解像度によって縦積み/横積みが切り替わる上に、フォントサイズや行間も逐次変化するので高さのpx固定は無理。
さらに子要素のボックスに入っている文章量を揃えることもできません。

結論から言うと1行追加するだけでいけました。

親要素に追加

.parent {
    display: flex;
}

子要素には何もする必要なし！
こんなに簡単なことなのに、思い当たるまでにずいぶん時間がかかってしまいました。

スマホ表示で横並びが解除されるとこのような感じになります。下に余計なスペースが入ったりはしません。

ちなみに一番最初に思いついたのが絶対配置を使用する方法でしたが、これは今回のように親要素の高さが可変だと使えませんでした。

親要素に追加

.parent {
    position: relative;
}

子要素に追加

.child {
    position: absolute;
    top: 0;
    bottom: 0;
}

relativeを付加した親要素に高さの指定を与えずに子要素にabsoluteを付加すると、親要素の高さが無くなるために配置が崩れるみたいです。
親要素に決まった高さを与えられるケースならこの方法も有効。