CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

CSS Overflow

The overflow property controls what happens to content that is too big to fit into an area.

The overflow property controls what happens to content that is too big to fit into an area. The options include clipping, showing scrollbars, or displaying the content flowing out of its container.

The overflow property controls what happens to content that is too big to fit into an area.

The options include clipping, showing scrollbars, or displaying the content flowing out of its container.

The overflow property controls what happens to content that is too big to fit into an area.

The options include clipping, showing scrollbars, or displaying the content flowing out of its container.

The options include clipping, showing scrollbars, or displaying the content flowing out of its container.

The overflow property has the following values:

  • visible - The overflow is not clipped. It renders outside the element's box (This is default)
  • hidden - The overflow is clipped, and the rest of the content will be hidden
  • scroll - The overflow is clipped, but a scrollbar is added to see the rest of the content
  • auto - If overflow is clipped, a scrollbar should be added to see the rest of the content

Note: The overflow property only works with a specified height.


overflow: visible

By default, the overflow is visible, meaning that content is not clipped and it renders outside the element's box:




Run code

overflow: hidden

When overflow is hidden, the overflow is clipped, and the rest of the content is hidden:

Run code

overflow: scroll

When overflow value is set to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box.

Note that this will add a scrollbar both horizontally and vertically even if you do not need it:

Run code

overflow: auto

The auto value is similar to scroll, but it adds scrollbars only when necessary:

Run code

overflow-x and overflow-y

The overflow-x and overflow-y properties specifies whether to change the overflow of content horizontally or vertically:

overflow-x specifies what to do with the left/right edges of the content:

The value of PI: 3.1415926535897932384626433832795029 English alphabets: ABCDEFGHIJKLMOPQRSTUVWXYZABCDEFGHIJKLMOPQRSTUVWXYZ

overflow-y specifies what to do with the top/bottom edges of the content:

Run code

CSS Overflow properties

Property Description
overflow Specifies what happens if content overflows an element's box
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area