【ちょいメモ】overflow: hidden;とは？

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

overflow: hidden; は、要素のコンテンツが指定されたサイズ（この場合は width: 100% と height: 100%）を超えた場合に、はみ出た部分を非表示にするというCSSプロパティ。

この具体的な例では、

html, body に対して指定されているので、ページ全体に適用される。
width: 100% と height: 100% で画面いっぱいのサイズを指定し、
overflow: hidden で、そのサイズを超えるコンテンツは表示されなくなる。

実際の効果としては、

• スクロールバーが表示されなくなる。
• ページの縦横のスクロールができなくなる。
• コンテンツが画面サイズを超えた場合、超過部分は切り取られて見えなくなる。

これは以下のような場合によく使用される

• モーダルウィンドウを表示する時に背景のスクロールを防ぐ。
• 特定のレイアウトデザインを実現する。
• 意図しないスクロールを防止する。

デフォルトでは overflow は visible（はみ出た部分も表示する）に設定されています。