Trong CSS, thuộc tính overflow được sử dụng để kiểm soát hành vi của nội dung tràn phần tử chứa nó. Nó thường được sử dụng cùng với chiều cao hoặc chiều rộng được chỉ định để xác định cách hoạt động của nội dung khi vượt quá kích thước được chỉ định. Thuộc tính overflow có thể nhận nhiều giá trị:

1. hiển thị (mặc định): Nội dung không bị cắt bớt và có thể tràn hộp nội dung.

    css
    .example {
     overflow: visible;
   }
   

2. ẩn: Nội dung tràn ra sẽ bị cắt bớt và không hiển thị.

    css
    .example {
     overflow: hidden;
   }
   

3. cuộn: Thêm thanh cuộn vào phần tử, cho phép người dùng cuộn và xem nội dung ẩn.

    css
    .example {
     overflow: scroll;
   }
   

4. auto: Tương tự như cuộn, nhưng thanh cuộn chỉ được thêm vào nếu nội dung tràn ra.

    css
    .example {
     overflow: auto;
   }
   

5. kế thừa: Thuộc tính overflow kế thừa giá trị của nó từ phần tử cha.

    css
    .example {
     overflow: inherit;
   }
   

Sau đây là một ví dụ đơn giản minh họa việc sử dụng thuộc tính 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>

Trong ví dụ này, nội dung trong div .content vượt quá kích thước được chỉ định bởi div .container và thanh cuộn sẽ xuất hiện do thuộc tính overflow: scroll; trên vùng chứa.

Điều chỉnh các giá trị và thuộc tính dựa trên yêu cầu thiết kế và bố cục cụ thể của bạn.