# Overflow

Use the overflow utility to set the `overflow` property of an element.

> The overflow property specifies whether to clip content, render scrollbars or just display content when it overflows its block level container. — [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)

**Format**: `.ds-u-overflow--[hidden|scroll|auto]`

<EmbeddedExample>
  <section>
    <article class="ds-u-margin-bottom--3">
      <code class="ds-u-margin-bottom--1">.ds-u-overflow--hidden</code>
      <div class="ds-u-overflow--hidden ds-u-border--1 ds-u-padding--2" style={{ height: 100 }}>
        <div class="ds-u-measure--narrow utility-example">{loremIpsumGenerator('l')}</div>
      </div>
    </article>
    <article class="ds-u-margin-bottom--3">
      <code class="ds-u-margin-bottom--1">.ds-u-overflow--scroll</code>
      <div class="ds-u-overflow--scroll ds-u-border--1 ds-u-padding--2" style={{ height: 100 }}>
        <div class="ds-u-measure--narrow utility-example">{loremIpsumGenerator('l')}</div>
      </div>
    </article>
    <article class="ds-u-margin-bottom--3">
      <code class="ds-u-margin-bottom--1">.ds-u-overflow--auto</code>
      <div class="ds-u-overflow--auto ds-u-border--1 ds-u-padding--2" style={{ height: 100 }}>
        <div class="ds-u-measure--narrow utility-example">{loremIpsumGenerator('l')}</div>
      </div>
    </article>
  </section>
</EmbeddedExample>