CSS - The Overflow Property

In CSS, the overflow property specifies what should happen if the content of an element overflows its box. The default value is visible, which means that the content will be visible outside of the element's box.

Other possible values include hidden, which hides the overflow, scroll, which adds scrollbars to the element so that the user can scroll through the overflow content, and auto, which adds scrollbars only when the content overflows the element's box.

overflow: visible

overflow: visible; is the default value for the overflow property in CSS. It means that the content of an element is allowed to overflow outside of its box.

This can be useful in certain situations where you want to have elements overlap or have text or other content extend outside of a container.

To use it, simply add the overflow: visible; property to the CSS class or ID of the element you want to affect.

For example:

.my-class {
  overflow: visible;
}
<div class="my-class">
  <p>This text will overflow outside of the div if the div is not big enough to contain it</p>
</div>

It's important to consider that this could lead to layout issues if the element's container is not big enough to contain all the content.

overflow: hidden

overflow: hidden; is a value for the overflow property in CSS. It means that the content of an element that overflows its box will be hidden and not visible on the page.

This can be useful in situations where you want to prevent content from overflowing, and keep it contained within a specific area.

To use it, simply add the overflow: hidden; property to the CSS class or ID of the element you want to affect.

For example:

.my-class {
  overflow: hidden;
}
<div class="my-class">
  <p>This text will be hidden if it overflows the div</p>
</div>

Keep in mind that this property will hide any overflow, including scrollbars. If you want to keep the scrollbar and hide the overflow, you can use overflow: scroll. Also, it's important to mention that this will also crop any content if it goes beyond the element's box.

overflow: scroll

overflow: scroll; is a value for the overflow property in CSS. It means that if the content of an element overflows its box, scrollbars will be added to the element so that the user can scroll through the overflow content.

This can be useful in situations where you want the user to be able to access the overflow content, but you don't want it to be visible on the page.

To use it, simply add the overflow: scroll; property to the CSS class or ID of the element you want to affect.

For example:

.my-class {
  overflow: scroll;
}
<div class="my-class">
  <p>This text will be hidden if it overflows the div, but you will be able to scroll and see it</p>
</div>

It's important to mention that scrollbars will always be visible, even if the content does not overflow the element.

Also, this property will add both horizontal and vertical scrollbars, even if only one of them is needed.

Keep in mind that this property applies to the block layout, so it will work for elements with a fixed width and height.

overflow: auto

overflow: auto; is a value for the overflow property in CSS. It means that if the content of an element overflows its box, scrollbars will be added to the element so that the user can scroll through the overflow content.

The difference between overflow: auto and overflow: scroll is that overflow: auto only adds scrollbars when the content overflows the element's box, while overflow: scroll always adds scrollbars regardless of whether the content overflows or not.

To use it, simply add the overflow: auto; property to the CSS class or ID of the element you want to affect.

For example:

.my-class {
  overflow: auto;
}
<div class="my-class">
  <p>This text will be hidden if it overflows the div, but you will be able to scroll and see it only if the text overflows the div</p>
</div>

It's important to mention that this property applies to the block layout, so it will work for elements with a fixed width and height.

Also, this property will add both horizontal and vertical scrollbars, only if needed.

Keep in mind that this property is useful when you have a fixed size container and the content is dynamic, so it's not guaranteed that it will overflow, but it could.

overflow-x and overflow-y

overflow-x and overflow-y are properties in CSS that allow you to control the overflow of an element in the horizontal (x-axis) and vertical (y-axis) directions, respectively.

These properties work similar to the overflow property, but allow you to specify different overflow behavior for the horizontal and vertical directions.

To use them, you can add the overflow-x and overflow-y properties to the CSS class or ID of the element you want to affect and set them to the desired value.

For example, to have a horizontal scrollbar when the content overflows the element's width and a vertical scrollbar when the content overflows the element's height, you can use:

.my-class {
  overflow-x: auto;
  overflow-y: auto;
}
<div class="my-class">
  <p>This text will have a horizontal scrollbar when the text overflows the div width and a vertical scrollbar when the text overflows the div height</p>
</div>

You can use any of the accepted values for the overflow property, like visible, hidden, scroll, or auto.

It's important to mention that when you use overflow-x and overflow-y, the value of overflow will be set to visible by default.

These properties allow you to have more control over the overflow of an element, you can have a horizontal scrollbar when the content overflows the element's width and no vertical scrollbar, for example.

CSS Basics