overflow

by

The overflow property in CSS controls how content is handled when it exceeds its container’s boundaries. It’s particularly useful for managing the display of content within fixed-width or height elements.

Value Options

  • visible: (Default) Content overflows the container’s boundaries.
  • hidden: Content is clipped and hidden if it exceeds the container’s boundaries.
  • scroll: Scrollbars appear to allow users to view the entire content.
  • auto: Scrollbars appear only if the content overflows the container’s boundaries.

Example

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

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

In this example:

  • The .container element has a fixed width and height.
  • The .content element is larger than its container.
  • The overflow: auto property on .container ensures that scrollbars appear when necessary, allowing users to view the entire .content.

Additional Considerations

  • overflow-x and overflow-y: For more granular control, you can use overflow-x and overflow-y to specify overflow behavior independently for the horizontal and vertical axes.
  • text-overflow: If you’re dealing with text specifically, the text-overflow property can be used to control how text is handled when it overflows its container.
  • Scrollbars: The appearance of scrollbars can be customized using CSS properties like scrollbar-width, scrollbar-color, and scrollbar-gutter.