Overflow

Part of the Styling with CSS section of Coddy's HTML journey — lesson 41 of 76.

In CSS, the overflow property controls what happens to content that overflows its element's box. When an element's content is too large to fit within the specified width and height, the overflow property determines whether to clip the content, add scrollbars, or display the overflowing content outside the element's boundaries.

Here's the basic syntax for using the overflow property:

selector {
    overflow: value;
}

value: The desired overflow behavior, which can be one of the following:

visible: This is the default value. Overflowing content is rendered outside the element's box and may overlap adjacent elements.

hidden: Overflowing content is clipped, and the rest of the content is invisible.

scroll: Adds scrollbars (both horizontal and vertical) to the element, allowing users to scroll through the overflowing content.

auto: The browser determines whether to add scrollbars based on the content and available space. Typically, scrollbars are added only when necessary.

For example:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

In this example, all <div> elements with a width of 200px and a height of 100px will have scrollbars added to view any overflowing content.

You can also control the overflow behavior for the horizontal and vertical directions independently using the overflow-x and overflow-y properties:

.example {
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: scroll; /* Add a vertical scrollbar */
}

Challenge

Easy

You are given an HTML document with a division (<div>) that contains a paragraph (<p>) with a long text. Your task is to use the overflow property to control how the overflowing content is displayed. Follow the steps below:

Write a CSS rule that targets the <div> element. Set the width to 300px, the height to 150px, and the border to 1px solid black.
Set the overflow property of the <div> to scroll to add scrollbars to the element.

Cheat sheet

The overflow property controls what happens to content that overflows its element's box:

selector {
    overflow: value;
}

Overflow values:

visible: Default. Content overflows outside the element's box
hidden: Overflowing content is clipped and invisible
scroll: Adds scrollbars (horizontal and vertical)
auto: Browser adds scrollbars only when necessary

Example:

div {
    width: 200px;
    height: 100px;
    overflow: scroll;
}

Control horizontal and vertical overflow independently:

.example {
    overflow-x: hidden; /* Hide horizontal overflow */
    overflow-y: scroll; /* Add vertical scrollbar */
}

Try it yourself

<html>
<head>
    <title>Overflow</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div>
        <p>This is a long text that will likely overflow its container. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</body>
</html>