Overflow - scroll, auto, visible, hidden, overflow-x, overflow-y

• overflow: visible;:
• overflow: hidden;:
• overflow: scroll;:
• overflow: auto;:
• overflow-x and overflow-y:

The overflow property in CSS is used to control what happens if content overflows its containing element. There are various values you can use with the overflow property to define different behaviors. Here are some common values:

¶overflow: visible;:

• This is the default value. Content will overflow the container and be rendered outside of it.

Copy code
<div style="width: 200px; height: 200px; border: 1px solid black; overflow: visible;">
    This is some content that will overflow the container.
</div>

¶overflow: hidden;:

• Content that overflows will be hidden. This is useful when you want to clip the overflow.

<div style="width: 200px; height: 200px; border: 1px solid black; overflow: hidden;">
    This is some content that will be hidden if it overflows the container.
</div>

¶overflow: scroll;:

• A scrollbar will be added to the container, allowing the user to scroll and see the hidden content.

<div style="width: 200px; height: 200px; border: 1px solid black; overflow: scroll;">
    This is some content that will be scrollable if it overflows the container.
</div>

¶overflow: auto;:

• This value automatically adds a scrollbar only if the content overflows.

<div style="width: 200px; height: 200px; border: 1px solid black; overflow: auto;">
    This is some content that will have a scrollbar if it overflows the container.
</div>

¶overflow-x and overflow-y:

• These properties allow you to control the overflow behavior for the horizontal and vertical axes separately.

<div style="width: 200px; height: 100px; border: 1px solid black; overflow-x: hidden; overflow-y: scroll;">
    This is some content that will have a vertical scrollbar but no horizontal scrollbar.
</div>

These are basic examples to give you an idea of how the overflow property works in different scenarios. You can customize the sizes, borders, and content to suit your specific needs.