overflowの使い方

overflow:visible;

内容がボックスに収まらない場合、ボックスからはみ出して表示される(初期値)

overflow:hidden;

内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない

overflow:scroll;

内容がボックスに収まらない場合、収まらない部分はボックスからはみ出さない。内容が収まらない場合には、スクロールバーなどが表示される

overflow:auto;

ボックスに収まらない内容をどう表示するかは、ユーザーエージェントに依存する。内容が収まらない場合には、スクロールバーなどが表示される

横並びの親要素に「overflow:hidden;」

親子でoverflow

一つ親要素を作る必要がありますが、親要素をoverflow: hidden;、子要素をoverflow: scroll;にして子要素のスクロールバーが出る方向にpaddingを当てて、子要素のスクロールバーを親要素のhidden位置より外にだすと言う方法があります。
実際にはスクロールバー自体が消えている訳ではないですが、ユーザーからは見えなくなっているという感じです

Chrome、Safariでの設定

以下はwebkit(ChromeやSafari)限定の方法。FireFoxやEdgeでは使えません。

IE、Edgeでの設定

IE(Internet Explorer)やMicrosoft Edgeでスクロールバーを非表示にするには、「-ms-overflow-style」を指定します。