overflow

Definition

The overflow property in CSS controls how content that overflows an element's box should be handled. It allows you to specify whether to clip the overflow or add scrollbars to allow users to scroll through the content.

Examples

Example 1: Hide any overflow:

.container {
  height: 200px;
  width: 300px;
  overflow: hidden;
}

Example 2: Add scrollbars for overflow:

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

Example 3: Control horizontal overflow only:

.container {
  height: 200px;
  width: 300px;
  overflow-x: scroll;
}

Example 4: Control vertical overflow only:

.container {
  height: 200px;
  width: 300px;
  overflow-y: scroll;
}

Values

Best Practices

• Always specify height and/or width - it's important to always specify a height and/or width for the container that you're applying the overflow property to. This ensures that the container has a defined size and that the overflow property behaves as expected.
• Use scrollbars sparingly - t's recommended to use scrollbars sparingly, as they can be a bit jarring for users. Instead, consider using the hidden value to hide any overflow by default, and then use the auto value to add scrollbars only when the user hovers over the container.
• Avoid using visible unless necessary - it's recommended to avoid using the visible value unless it's absolutely necessary. This value allows any overflowed content to be displayed outside of the container's box, which can lead to layout issues and make it difficult for users to interact with the content.

Browser Compatibility