Css Overflow Y

CSS overflow y

Created By: chatGPT

CSS overflow-y property controls the vertical overflow of an element. It's particularly useful when you want to manage the visibility of content that exceeds the height of a container. The possible values for this property are visible, hidden, scroll, and auto. Here's how each of them behaves:

visible: The default value. Content is not clipped. It may overflow the element's box.
hidden: Content is clipped, and no scrollbars are provided.
scroll: Content is clipped, but scrollbars appear, allowing the user to scroll to see hidden content.
auto: If the content is larger than the container, scrollbars are added. Otherwise, it behaves as if set to visible.

To see the effect of these values, consider the following example.

div {
    height: 100px;
    overflow-y: hidden;  /* Try changing this to visible, scroll, or auto */
    border: 1px solid black;
}

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

In this example, we define a div with a fixed height of 100 pixels. The .content class represents an element that inherently exceeds that height (200 pixels). Depending on the overflow-y value set, you can observe how the visible content changes. If you set it to scroll, for example, there will be a scrollbar allowing users to scroll through the clipped content.

<div class="wrapper">
    <div class="content">
        This is some overflowing content that is taller than the wrapper.  
        Additional text to ensure it exceeds the height  
        and demonstrates the scroll effect.
    </div>
</div>