CSS Tutorial

The language for styling web pages.

Chapter Quiz Exercises

CSS Overflow

The overflow property controls what happens when content is too large to fit in its container.

Overflow Values:

visible - Default. Content overflows outside the box
hidden - Overflow is clipped (invisible)
scroll - Always shows scrollbars
auto - Adds scrollbars only when needed

You can also use overflow-x and overflow-y separately.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
<style>
  body { font-family:Arial; padding:20px; }
  .box { width:200px; height:80px; background:#f0f4ff; border:2px solid #1572B6; border-radius:8px; padding:8px; margin:10px 0; font-size:13px; }
  .visible { overflow:visible; }
  .hidden  { overflow:hidden; }
  .scroll  { overflow:scroll; }
  .auto    { overflow:auto; }
  label    { font-weight:bold; color:#1572B6; display:block; margin-top:10px; }
</style>
</head>
<body>
  <label>overflow: visible (default - spills out):</label>
  <div class="box visible">This is a LOT of content that will overflow outside of the box because overflow is set to visible by default.</div>
  <br>
  <label>overflow: hidden (clipped):</label>
  <div class="box hidden">This is a LOT of content that will be clipped and hidden because overflow is hidden.</div>

<label>overflow: scroll (always scrollbars):</label>
  <div class="box scroll">This content will have scrollbars always visible. Scroll to see more content inside this small box.</div>

<label>overflow: auto (scrollbars only when needed):</label>
  <div class="box auto" style="height:100px;">Short content — no scrollbar needed here.</div>
</body>
</html>

Result

Topics

CSS Introduction CSS Syntax CSS Selectors CSS Colors CSS Backgrounds CSS Borders CSS Margins CSS Padding CSS Box Model CSS Text CSS Fonts CSS Display CSS Position CSS Flexbox CSS Grid CSS Transitions CSS Animations CSS Media Queries CSS Variables CSS Gradients CSS Shadows CSS 2D Transforms CSS 3D Transforms CSS Pseudo-classes CSS Pseudo-elements CSS Float CSS Overflow CSS Z-index CSS Opacity CSS Buttons

CSS Tutorial

Course Topics

CSS Overflow

CSS Overflow

Overflow Values:

Try It Yourself

Topics