CSS ボックス モデルの概念によれば、ページ上のすべての要素は長方形のボックスです。これらのボックスのサイズ、位置、動作はすべて CSS を使用して制御できます。動作とは、箱の内側と外側の内容が変化したときにどのように処理するかを意味します。たとえば、ボックスの高さを設定しない場合、ボックスの高さはコンテンツに合わせて必要に応じて大きくなります。しかし、ボックスの高さまたは幅を指定し、中のコンテンツがそれを超えた場合はどうなるでしょうか?ここで、CSS オーバーフロー プロパティを追加します。これにより、この状況の処理方法を指定できるようになります。
overflow プロパティには、visible (デフォルト)、hidden、scroll、および auto の4 つの値があります。オーバーフローの姉妹プロパティである overflow-y と overflow-x も 2 つありますが、これらはほとんど使用されません。
これらのそれぞれの値を見て、一般的な使用法とテクニックについて説明します。
見える
オーバーフロー属性を設定しない場合は、デフォルトのオーバーフロー属性値が表示されます。したがって、一般に、他の場所で設定されている値をオーバーライドする場合を除き、オーバーフロー プロパティを明示的に可視に設定する理由はありません。
ここで覚えておくべき重要な点は、ボックスの外側のコンテンツは表示されますが、コンテンツはページのワークフローに影響を与えないということです。例えば：
一般的に言えば、少なくともコンテンツがテキストであるボックスについては固定の高さを設定する必要はないため、このような状況は発生しません。
隠れた
表示されるデフォルト値の反対の値は非表示になります。ボックスの外側にあるものはすべて隠されます。
これは、コンテンツのオーバーフローによりレイアウトの問題が発生する可能性がある動的コンテンツを処理する場合に非常に役立ちます。ただし、この方法で非表示にしたコンテンツは (ソース コードを見ない限り) まったく表示されないことに注意してください。 たとえば、一部のユーザーはブラウザのデフォルトのフォントを予想よりも大きく設定しているため、テキストをボックスの外に押し出して完全に非表示にすることになります。