CSS では、 overflowプロパティは、その要素を含む要素からオーバーフローするコンテンツの動作を制御するために使用されます。多くの場合、指定された高さまたは幅と組み合わせて、コンテンツが指定されたサイズを超えたときにコンテンツがどのように動作するかを定義するために使用されます。 overflowプロパティには複数の値を指定できます。

1. 表示 (デフォルト):コンテンツはクリップされず、コンテンツ ボックスからはみ出す可能性があります。

    css
    .example {
     overflow: visible;
   }
   

2. hidden:オーバーフローしたコンテンツは切り取られ、表示されません。

    css
    .example {
     overflow: hidden;
   }
   

3. スクロール:要素にスクロールバーを追加し、ユーザーがスクロールして非表示のコンテンツを表示できるようにします。

    css
    .example {
     overflow: scroll;
   }
   

4. auto:スクロールと似ていますが、スクロールバーはコンテンツがオーバーフローした場合にのみ追加されます。

    css
    .example {
     overflow: auto;
   }
   

5. 継承: overflowプロパティは親要素から値を継承します。

    css
    .example {
     overflow: inherit;
   }
   

overflowプロパティの使用法を示す簡単な例を次に示します。

 css
 .container {
  width: 200px;
  height: 100px;
  overflow: scroll;
}

.content {
  width: 300px;
  height: 150px;
  background-color: lightblue;
}
 

 html
 <div class="container">
  <div class="content">
    <!-- Content that exceeds the container dimensions -->
    <!-- Scrollbars will appear due to the overflow: scroll; property -->
  </div>
</div>

この例では、 .content div 内のコンテンツが.container div で指定されたサイズを超えており、コンテナーのoverflow: scroll;プロパティによりスクロールバーが表示されます。

特定のレイアウトおよび設計要件に基づいて値とプロパティを調整します。