CMS Design System

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

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

.ds-u-overflow--hidden

We the People of the United States, in Order to form a more perfect Union, establish Justice, insure domestic Tranquility, provide for the common defence, promote the general Welfare, and secure the Blessings of Liberty to ourselves and our Posterity, do ordain and establish this Constitution for the United States of America.

.ds-u-overflow--scroll

.ds-u-overflow--auto

Code snippet

<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: 100px"
    >
      <div class="ds-u-measure--narrow utility-example">
        We the People of the United States, in Order to form a more perfect
        Union, establish Justice, insure domestic Tranquility, provide for the
        common defence, promote the general Welfare, and secure the Blessings of
        Liberty to ourselves and our Posterity, do ordain and establish this
        Constitution for the United States of America.
      </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: 100px"
    >
      <div class="ds-u-measure--narrow utility-example">
        We the People of the United States, in Order to form a more perfect
        Union, establish Justice, insure domestic Tranquility, provide for the
        common defence, promote the general Welfare, and secure the Blessings of
        Liberty to ourselves and our Posterity, do ordain and establish this
        Constitution for the United States of America.
      </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: 100px"
    >
      <div class="ds-u-measure--narrow utility-example">
        We the People of the United States, in Order to form a more perfect
        Union, establish Justice, insure domestic Tranquility, provide for the
        common defence, promote the general Welfare, and secure the Blessings of
        Liberty to ourselves and our Posterity, do ordain and establish this
        Constitution for the United States of America.
      </div>
    </div>
  </article>
</section>