Overflow

Sets how to handle overflow

Overflow

Usage

/* Format */
.u-overflow--{overflow} {}

/* Examples & modifiers */
.u-overflow--hidden {}
.u-overflow--auto {}
.u-overflow--visible {}
.u-overflow--scroll {}

Modifier	Values	Description
overflow	hidden, auto, visible, scroll	Sets how to handle overflow

Supports responsive suffix (e.g. u-overflow--{overflow}@{sm, md, lg}).

Examples

Scroll

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Hidden

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Visible

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Auto

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

<div class="grid u-padding--3">
    <div class="grid-md-3 u-color__bg--secondary u-overflow--scroll" style="height: 200px">
        <h3>Scroll</h3>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
</div>

<div class="grid u-padding--3">
    <div class="grid-md-3 u-color__bg--secondary u-overflow--hidden" style="max-height: 200px">
        <h3>Hidden</h3>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
</div>

<div class="grid u-padding--3">
    <div class="grid-md-3 u-color__bg--secondary u-overflow--visible" style="max-height: 200px">
        <h3>Visible</h3>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
</div>

<div class="grid u-padding--3">
    <div class="grid-md-3 u-color__bg--secondary u-overflow--auto" style="max-height: 200px">
        <h3>Auto</h3>
        <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    </div>
</div>