横並びのときに高さが低い方に高さを揃える

こういうときに使える

画像とテキストが横並びのレイアウトはよくあります。
このようなレイアウトをレスポンシブで対応するとき、
画像よりテキスト量が多いとあまり美しくないですよね
デザインを変えるわけにもいかないというときのため、テキストをスクロールする実装を行いました。
かなり単純な方法ですが、実は思い浮かばなかったので備忘録。

普通に横並びにしてみる

高さを合わせて横並びにするといえばflexbox!（個人の考えです）
ひとまずdisplay: flex;のみ指定したら
高さが高い方（テキスト）に合わせて、兄弟要素（画像）ももちろん伸び切ってしまいます。

See the Pen flexbox01 by YUU (@YUUMU) on CodePen.

高さを合わせたいコンテンツ（テキスト）に子要素を作る

flexboxの特性上高さが高い方に合わせてしまうのはしょうがないことです。
高さを合わせたいコンテンツ（テキスト）にはposition: relative;を指定、
その中にインナーを作ってposition: absolute;を指定することで高さがなくなり、
height: 100%;を指定することで元にしたい高さと必ず一致します。
今回は溢れた部分はわかりやすくスクロールします。

See the Pen flexbox02 by YUU (@YUUMU) on CodePen.

スクロールする部分とスクロールしない部分を作る

高さを合わせたが溢れた部分をどう対処するか、
スクロールする部分とスクロールしない部分を作りたいというときは、
もちろんスクロールしない要素とスクロールする要素を別で作ります。
しかし、position: absolute;を親要素を持つと、overflowは効きません。
そんなときは、
縦方向に並んだコンテンツもdisplay: flex;を指定することでしっかり収まり、
overflowも自在に扱えるようになります。

See the Pen flexbox03 by YUU (@YUUMU) on CodePen.

レスポンシブの際は、
ウィンドウ幅が狭まることを想定して、溢れるコンテンツに対してoverflow: auto;を指定、
基本はそのまま表示。超過したらスクロールするような実装ができますね。
※倍率切り替えたら違いがわかりやすいです。

See the Pen flex-responsive by YUU (@YUUMU) on CodePen.