Overflow

Overflow#

This property of the object describes how it behaves in the limited space.

You can find out more in mdn web docs.

Basic example#

In the following example displayed all options:

%%HTML
<details>
    <summary>scroll</summary>
    <div style='height:3cm;overflow:scroll;width:5cm;border:solid;font-size:20px'>Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</details>

<details>
    <summary>hidden</summary>
    <div style='height:3cm;overflow:hidden;width:5cm;border:solid;font-size:20px'>Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</details>

<details>
    <summary>visible</summary>
    <div style='height:3cm;overflow:visible;width:5cm;border:solid;font-size:20px'>Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</details>

<details>
    <summary>auto</summary>
    <div style='height:3cm;overflow:auto;width:5cm;border:solid;font-size:20px'>Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</details>

<details>
    <summary>clip</summary>
    <div style='height:3cm;overflow:clip;width:5cm;border:solid;font-size:20px'>Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</details>
scroll
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
hidden
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
visible
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
auto
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
clip
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.

clip vs hidden#

  • hidden does not show any content that lies outside the element;

  • clip does not show any content that lies ouside the elemnt + extra space described by overflow-clip-margin property.

So in the following example, I have created two divs, the first with overflow: hidden, the second with overflow: clip, and both have overflow-clip-margin: 1cm. As a result, only the content of the second div leaves the box for 1 cm.

%%HTML
<div style="display:flex;height:5cm">
    <div style="border:solid;width:5cm;height:3cm;overflow-clip-margin: 1cm;overflow: hidden">Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
    <div style="border:solid;width:5cm;height:3cm;overflow-clip-margin: 1cm;overflow: clip">Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.</div>
</div>
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.
Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. As much mud in the streets as if the waters had but newly retired from the face of the earth.

scroll vs auto#

If you are using the scroll option, this means that scrollbars will always be displayed, but if you are using auto, it will only add scrollbars when needed.

The following example shows the difference.

Note Some browsers display the scroll bar only when scrolling, but in a box that uses overflow: scroll less characters fit in one line than in a box that uses overflow: auto because there is some reserved space for the scroll bar.

%%HTML
<div style="display:flex;height:5cm;width:10cm">
    <div style="border:solid;width:5cm;height:5cm;overflow-clip-margin: 1cm;overflow: scroll">Scroll<br> A B C D E F G H I J K L M N O P Q R S T U V W X Y </div>
    <div style="border:solid;width:5cm;height:5cm;overflow-clip-margin: 1cm;overflow: auto">Auto<br> A B C D E F G H I J K L M N O P Q R S T U V W X Y </div>
</div>
Scroll
A B C D E F G H I J K L M N O P Q R S T U V W X Y
Auto
A B C D E F G H I J K L M N O P Q R S T U V W X Y
Contents