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


## こういうときに使える

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


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

<p class="codepen" data-height="400" data-theme-id="0" data-default-tab="html,result" data-user="YUUMU" data-slug-hash="ZEzmzEa" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="flexbox01">
  <span>See the Pen <a href="https://codepen.io/YUUMU/pen/ZEzmzEa/">
  flexbox01</a> by YUU (<a href="https://codepen.io/YUUMU">@YUUMU</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

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

<p class="codepen" data-height="400" data-theme-id="0" data-default-tab="html,result" data-user="YUUMU" data-slug-hash="BaBGByj" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="flexbox02">
  <span>See the Pen <a href="https://codepen.io/YUUMU/pen/BaBGByj/">
  flexbox02</a> by YUU (<a href="https://codepen.io/YUUMU">@YUUMU</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


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

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

<p class="codepen" data-height="400" data-theme-id="0" data-default-tab="html,result" data-user="YUUMU" data-slug-hash="jONQNyL" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="flexbox03">
  <span>See the Pen <a href="https://codepen.io/YUUMU/pen/jONQNyL/">
  flexbox03</a> by YUU (<a href="https://codepen.io/YUUMU">@YUUMU</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>



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


<p class="codepen" data-height="400" data-theme-id="0" data-default-tab="html,result" data-user="YUUMU" data-slug-hash="ZEzmbpZ" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="flex-responsive">
  <span>See the Pen <a href="https://codepen.io/YUUMU/pen/ZEzmbpZ/">
  flex-responsive</a> by YUU (<a href="https://codepen.io/YUUMU">@YUUMU</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>