Overflow
Control how an element handles overflow content with the overflow trait.
Format {axis}:{type}.
- axis:
{"" | x | y} - type:
{auto | hidden | scroll | visible}
Default styling
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem ante, elementum eget tortor id, pellentesque lacinia dolor. Nunc in metus facilisis, scelerisque ante eget, lacinia purus. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi. Nam a metus dictum, sollicitudin ligula a, mollis est. Phasellus consectetur est nec velit interdum dignissim. Nunc enim felis, porta at nisl ultricies, porta molestie nibh. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi.
auto
Auto scroll for x and y axis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem ante, elementum eget tortor id, pellentesque lacinia dolor. Nunc in metus facilisis, scelerisque ante eget, lacinia purus. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi. Nam a metus dictum, sollicitudin ligula a, mollis est. Phasellus consectetur est nec velit interdum dignissim. Nunc enim felis, porta at nisl ultricies, porta molestie nibh. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi.
hidden
Hidden scrolls for x and y axis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem ante, elementum eget tortor id, pellentesque lacinia dolor. Nunc in metus facilisis, scelerisque ante eget, lacinia purus. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi. Nam a metus dictum, sollicitudin ligula a, mollis est. Phasellus consectetur est nec velit interdum dignissim. Nunc enim felis, porta at nisl ultricies, porta molestie nibh. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi.
scroll
Always show scrolls for x and y axis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem ante, elementum eget tortor id, pellentesque lacinia dolor. Nunc in metus facilisis, scelerisque ante eget, lacinia purus. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi. Nam a metus dictum, sollicitudin ligula a, mollis est. Phasellus consectetur est nec velit interdum dignissim. Nunc enim felis, porta at nisl ultricies, porta molestie nibh. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi.
Markup
<div pam-overflow="[modifier]" pam-size="h:5" pam-space="p:2" pam-shadow="z2">
<div pam-size="h:10" pam-space="p:2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lorem ante, elementum eget tortor id, pellentesque lacinia dolor. Nunc in metus facilisis, scelerisque ante eget, lacinia purus. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi. Nam a metus dictum, sollicitudin ligula a, mollis est. Phasellus consectetur est nec velit interdum dignissim. Nunc enim felis, porta at nisl ultricies, porta molestie nibh. Nam tincidunt arcu sed libero egestas, sit amet pretium felis laoreet. Aenean quis purus suscipit, venenatis nunc vel, fermentum nisi.</div>
</div>