HTML & CSS - Mastery / Layout Fundamentals

OVERFLOW

🔁 Understanding Overflow Property

Overflow in CSS Defines what happens when content overflows the box.

🔹 visible (default)

  • Content spills out of the box.

  • No clipping.

<body>
  <h2>CSS Overflow: visible</h2>
  <div class="box">
      This is a box with a fixed size. The size of the box is fixed and not
      flexible. But the content inside this box is very long and will overflow
      beyond the box boundaries without being cut or hidden.
  </div>
</body>
/* styles.css */
.box {
  overflow: visible;
}

🔹 hidden

  • Content is clipped (cut off).

  • No scrollbar shown.

<body>
  <h2>CSS overflow: hidden</h2>
  <div class="box">
    This box has a fixed height and width.<br>
    But since <code>overflow: hidden</code> is used, extra 
    content will spill out of the box without being clipped or hidden.
    Extra content spilling out... Extra content spilling out... 
    Extra content spilling out...
  </div>
</body>
/* styles.css */
.box {
  overflow: hidden;
}

🔹 scroll

  • Always shows scrollbars (even if not needed).

  • Both vertical and horizontal if necessary.

<body>
  <h2>CSS overflow: scroll</h2>
  <div class="box">
      This content is very long and will overflow outside the box. Scrollbars
      will appear even if all the content fits inside the box. Scroll down to
      read more. 
      More text... More text... More text... More text... More text... More
      text... More text... More text... More text... More text...
  </div>
</body>
/* styles.css */
.box {
  overflow: scroll;
}

🔹 auto

  • Adds scrollbars only when needed.

<body>
  <h2>CSS overflow: auto</h2>
  <div class="box">
      This box uses <code>overflow: auto</code>.<br />
      Scrollbars will appear <strong>only</strong> if the content inside exceeds
      the box size. <br /><br />
      Extra content... Extra content... Extra content... Extra content... Extra
      content... Extra content... Extra content... Extra content... Extra
      content...
  </div>
</body>
/* styles.css */
.box {
  overflow: auto;
}

🔁 Playground

Full Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Overflow Example</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h2>Overflow: visible</h2>
    <div class="box visible">
      This is some long overflowing text that goes beyond the box.
    </div>

    <h2>Overflow: hidden</h2>
    <div class="box hidden">
      This is some long overflowing text that goes beyond the box.
    </div>

    <h2>Overflow: scroll</h2>
    <div class="box scroll">
      This is some long overflowing text that goes beyond the box.
    </div>

    <h2>Overflow: auto</h2>
    <div class="box auto">
      This is some long overflowing text that goes beyond the box.
    </div>
  </body>
</html>
.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
  margin-bottom: 20px;
  background: lightyellow;
}

/* Different overflow types */
.visible {
  overflow: visible;
}

.hidden {
  overflow: hidden;
}

.scroll {
  overflow: scroll;
}

.auto {
  overflow: auto;
}

How to use overflow-x and overflow-y for fine-grained scroll control?

✅ What This Does:

  • .overflow-x allows horizontal scrolling only (scrollbar appears at the bottom).

  • .overflow-y allows vertical scrolling only (scrollbar appears at the side).

  • white-space: nowrap is used to prevent line breaks and force horizontal overflow.