Overflow

Control content overflow behavior

Syntax

layout="overflow:[value]"

Values

Value	CSS Output	Description
auto	overflow: auto	Scrollbar when needed
hidden	overflow: hidden	Hide overflow
visible	overflow: visible	Show overflow
scroll	overflow: scroll	Always show scrollbar
clip	overflow: clip	Clip overflow

Examples

<div layout="overflow:hidden">Clipped content</div>
<div layout="overflow:auto">Scrollable</div>

Preview

Overflow Hidden

layout="overflow:hidden" - Content clipped at container edge

This is a long text that will be clipped because overflow is hidden.

View Code

<div layout="overflow:hidden" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
  <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will be clipped because overflow is hidden.</p>
</div>

Overflow Auto

layout="overflow:auto" - Scrollbar appears when content overflows

This is a long text that will show a scrollbar because overflow is auto.

View Code

<div layout="overflow:auto" space="p:small" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium" style="height: 60px; width: 150px;">
  <p visual="text:neutral-800 dark:text:neutral-200">This is a long text that will show a scrollbar because overflow is auto.</p>
</div>