Overflow
Overflow utilities decide what happens when content is bigger than its box.
In this page:
Syntax
<div class="overflow-auto">scrolls when needed</div>
<div class="overflow-hidden">clipped</div>Overflow
.overflow-auto adds scrollbars when needed, .overflow-hidden clips content, .overflow-visible lets it spill and .overflow-scroll always shows scrollbars.
Directional versions .overflow-x-auto and .overflow-y-auto exist. Give the box a fixed size for the effect.
Note:
overflow-auto only shows a scrollbar when content overflows.
Example: Overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="overflow-auto border p-2 mb-2" style="max-width: 16rem; max-height: 5rem">This box scrolls because its content is longer than the height allows. Keep writing text so it overflows the box height and shows a scrollbar.</div>
<div class="overflow-hidden border p-2" style="max-width: 16rem; height: 2.5rem">This text is clipped by overflow-hidden when it is too long for the box.</div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Not setting a height or width
- Hiding important content with overflow-hidden
- Nested scrolling areas
Chapter Summary
- overflow-auto adds scrollbars as needed
- overflow-hidden clips
- overflow-x-* and overflow-y-*
- Requires a limited box size
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: