Overflow

Syntax

Class
Properties
overflow-{value}
overflow: {value};
overflow-x-{value}
overflow-x: {value};
overflow-y-{value}
overflow-y: {value};

Parameters

value
auto
value
hidden
value
visible
value
scroll
<div class="t1 w-256 h-128 bg-c-white shadow-4 p-8 overflow-auto"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet ullamcorper neque. Donec placerat mi ut enim porttitor sagittis. Donec nec tincidunt tortor. Fusce sodales, felis ac luctus accumsan, quam mi vestibulum enim, eu gravida nunc tortor a diam. </div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Clip overflowing contents.
t1 overflow-hidden
.t1.overflow-hidden { overflow: hidden; }
Show overflowing contents.
t1 overflow-visible
.t1.overflow-visible { overflow: visible; }
Scroll contents.
t1 overflow-scroll
.t1.overflow-scroll { overflow: scroll; }
Scroll contents only when necessary.
t1 overflow-auto
.t1.overflow-auto { overflow: auto; }
Clip overflowing contents along the X axis.
t1 overflow-x-hidden
.t1.overflow-x-hidden { overflow-x: hidden; }
Clip overflowing contents along the y axis.
t1 overflow-y-hidden
.t1.overflow-y-hidden { overflow-y: hidden; }