要素を横並びにする際に使用できるくらいのことしか分かってなかったので、改めて調べてまとめました。

概要

overflowはコンテンツが要素に収まらない場合、収まらない部分をどのようにするかを指定します。
どのようにするかの指定は主に以下の通りです。

visible
hidden
scroll
auto

指定内容

以下に指定内容の説明とサンプルを載せます。HTMLは以下を共通で使用します。

    <div class='contents-box'>
        <div class="contents">
        </div>
    </div>

visible

コンテンツが要素に収まらない部分は表示されます。overflowを指定しない場合と同じです。

サンプル

CSS

.contents-box {
  width: 100px;
  height: 100px;
  overflow: visible;
  background-color: aqua;
}

.contents {
  width: 200px;
  height: 200px;
  background-color: red;
}

結果

分かりにくいですが赤が縦横200pxで表示されている事がわかります。

hidden

コンテンツが要素に収まらない部分は表示されません。

サンプル

CSS

.contents-box {
  width: 100px;
  height: 100px;
  overflow: hidden;
  background-color: aqua;
}

.contents {
  width: 200px;
  height: 200px;
  background-color: red;
}

結果

分かりにくいですが赤が縦横100pxで表示されている事がわかります。

scroll

コンテンツが要素に収まらない部分は表示されませんが、スクロールバーを使用して表示させる事が出来ます。なお、スクロールバーが常に表示された状態となり、コンテンツが要素に収まっていてもスクロールバーは表示されます。

サンプル

CSS

.contents-box {
  width: 100px;
  height: 100px;
  overflow: scroll;
  background-color: aqua;
}

.contents {
  width: 200px;
  height: 200px;
  background-color: red;
}

結果

auto

ブラウザによって動作が異なります。

サンプル

CSS

.contents-box {
  width: 100px;
  height: 100px;
  overflow: auto;
  background-color: aqua;
}

.contents {
  width: 200px;
  height: 200px;
  background-color: red;
}

結果

最後に

特にありません。