Values
| Value | Behaviour |
|---|
| visible | Default. Content overflows and is visible outside the box. |
| hidden | Clips overflow. Creates a block formatting context (BFC). Creates stacking context. |
| scroll | Always shows scrollbars (even when not needed). |
| auto | Adds scrollbars only when content overflows. Preferred over scroll. |
| clip | Like hidden but does NOT create a BFC or stacking context. |
overflow-x & overflow-y
/* Horizontal scroll, vertical clip */
.code-block {
overflow-x: auto;
overflow-y: hidden;
}
/* Vertical scroll only (common for sidebars) */
.sidebar {
overflow-y: auto;
overflow-x: hidden;
height: 100vh;
}
/* Note: setting one axis to visible while the other is scroll/auto
forces visible to become auto — you can't mix them */
overflow: clip vs hidden
/* hidden — creates BFC, clearing floats, affects layout */
.clearfix { overflow: hidden; }
/* clip — purely visual clip, no layout side effects */
.clip-only { overflow: clip; }
/* Use clip when you want to clip without the BFC side effect */
.hero { overflow: clip; } /* clips absolutely positioned decorations */
/* Horizontal scroll carousel */
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 16px;
-webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
}
.slide {
flex: 0 0 300px;
scroll-snap-align: start;
}
/* Hide scrollbar but keep scroll */
.carousel {
scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }
text-overflow (Related)
/* Truncate long text with ellipsis */
.truncate {
white-space: nowrap; /* prevent wrapping */
overflow: hidden; /* clip */
text-overflow: ellipsis; /* show ... */
}
/* Multi-line truncation */
.clamp {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /* show 3 lines */
overflow: hidden;
}