【CSS】オーバーフローしたコンテンツの表示

hidden

ボックスの横幅と高さを width と height プロパティで指定すると、ボックス内にコンテンツが収まらないケースが出てきます。
これは overflow プロパティの値が初期値の visible で処理される為です。 overflow プロパティの値を hidden にすると、オーバーフローしたコンテンツを隠すことが出来ます。ただし、隠した部分は観覧できなくなります。

<div id="hidden">
  <h2>HAM SANDWICHES</h2>
  <p>焼きたての手作りパンで新鮮なハム、トマト、チーズ、レタスを挟んだサンドイッチです。マスタードをピリッときかせたマヨネーズソースがおいしくて、お店の近くを通るたびに買い込んでしまいます。</p>
</div> <!-- /#hidden -->

#hidden {
    border: solid 2px orange;
    background: lemonchiffon;
    width: 360px;
    height: 120px;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}

scroll

オーバーフローしたコンテンツを隠した状態で観覧できるようにする為には、 overflow プロパティの値を scroll にします。すると、ボックスにスクロールバーが表示され、インラインフレームの形でコンテンツを観覧できるようになります。
ただし、コンテンツの分量と関係なく、常に縦横にスクロールバーが表示されます。

<div id="scroll">
  <h2>HAM SANDWICHES</h2>
  <p>焼きたての手作りパンで新鮮なハム、トマト、チーズ、レタスを挟んだサンドイッチです。マスタードをピリッときかせたマヨネーズソースがおいしくて、お店の近くを通るたびに買い込んでしまいます。</p>
</div> <!-- /#scroll -->

#scroll {
    border: solid 2px orange;
    background: lemonchiffon;
    width: 360px;
    height: 120px;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: scroll;
}

auto

スクロールバーを必要に応じて表示する為には、値を auto と指定します。すると、コンテンツがオーバーフローしている縦方向のスクロールバーのみが表示されます。

<div id="auto">
  <h2>HAM SANDWICHES</h2>
  <p>焼きたての手作りパンで新鮮なハム、トマト、チーズ、レタスを挟んだサンドイッチです。マスタードをピリッときかせたマヨネーズソースがおいしくて、お店の近くを通るたびに買い込んでしまいます。</p>
</div> <!-- /#auto -->

#auto {
    border: solid 2px orange;
    background: lemonchiffon;
    width: 360px;
    height: 120px;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    overflow: auto;
}

overflow-x, overflow-y

overflow プロパティの設定は、横方向と縦方向の設定を個別に指定することもできます。その場合、 overflow-x と overflow-y プロパティを利用します。
たとえば、overflow-x プロパティの値を scroll 、 overflow-y プロパティの値を hidden にすると、横方向はスクロールバーが表示され、縦方向はスクロールバーを隠した表示となります。

<div id="x-y">
  <h2>HAM SANDWICHES</h2>
  <p>焼きたての手作りパンで新鮮なハム、トマト、チーズ、レタスを挟んだサンドイッチです。マスタードをピリッときかせたマヨネーズソースがおいしくて、お店の近くを通るたびに買い込んでしまいます。</p>
</div> <!-- /#x-y -->

#x-y {
    border: solid 2px orange;
    background: lemonchiffon;
    width: 360px;
    height: 120px;
    padding: 10px;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    overflow-x: scroll;
    overflow-y: hidden;
}