lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter5Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Open+Sans"
      rel="stylesheet"
    />
    <title>CSS Overflow Example</title>
  </head>
  <body>
    <h1>CSS Overflow Example</h1>
    <div id="box1">
      <p>Content will be hidden if it overflows the element</p>
      <p>Content will be hidden if it overflows the element</p>
      <p>Content will be hidden if it overflows the element</p>
      <p>Content will be hidden if it overflows the element</p>
      <p>Content will be hidden if it overflows the element</p>
      <p>Content will be hidden if it overflows the element</p>
      <p>Content will be hidden if it overflows the element</p>
    </div>
    <div class="spacer" />
    <div id="box2">
      <p>Scrollbars will appear if content overflows</p>
      <p>Scrollbars will appear if content overflows</p>
      <p>Scrollbars will appear if content overflows</p>
      <p>Scrollbars will appear if content overflows</p>
      <p>Scrollbars will appear if content overflows</p>
      <p>Scrollbars will appear if content overflows</p>
      <p>Scrollbars will appear if content overflows</p>
      <p>Scrollbars will appear if content overflows</p>
      <p>Scrollbars will appear if content overflows</p>
    </div>
    <div class="spacer" />
    <div id="box3">
      <p>Scrollbars will appear only when necessary</p>
      <p>Scrollbars will appear only when necessary</p>
      <p>Scrollbars will appear only when necessary</p>
      <p>Scrollbars will appear only when necessary</p>
      <p>Scrollbars will appear only when necessary</p>
      <p>Scrollbars will appear only when necessary</p>
      <p>Scrollbars will appear only when necessary</p>
    </div>
  </body>
</html>

# Overflow Handling (overflow)

The CSS `overflow` property specifies how to handle content that overflows an element's boundaries.

<br />

## Key Values for Overflow

- **visible**: The default value; content overflows the element without clipping.

- **hidden**: Content that overflows the element is hidden and not visible.

- **scroll**: Scrollbars are always displayed, and the content can be scrolled if it overflows.

- **auto**: Scrollbars are displayed only when the content overflows.

<br />

### Example:

```css title="CSS"
/* Hide content that overflows the element */
div#box1 {
  overflow: hidden;
}

/* Always show scrollbars if content overflows */
div#box2 {
  overflow: scroll;
}

/* Show scrollbars only when necessary */
div#box3 {
  overflow: auto;
}
```

<br />

Follow the highlighted parts of the code and try typing it in yourself.

The default value of the overflow property in CSS is visible. This means that content which overflows the boundaries of its container is displayed as is.

### The default value of the overflow property in CSS is hidden.