Layouts

Overflow

Utilities for sets how to handle content that's too big for it's container.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
overflow-auto	overflow: auto
overflow-hidden	overflow: hidden
overflow-visible	overflow: visible
overflow-scroll	overflow: scroll

class	css
overflow-x-auto	overflow-x: auto
overflow-y-auto	overflow-y: auto
overflow-x-hidden	overflow-x: hidden
overflow-y-hidden	overflow-y: hidden
overflow-x-visible	overflow-x: visible
overflow-y-visible	overflow-y: visible
overflow-x-scroll	overflow-x: scroll
overflow-y-scroll	overflow-y: scroll

class	css
scrolling-touch	-webkit-overflow-scrolling: touch
scrolling-auto	-webkit-overflow-scrolling: auto

Usage

<div class="width-64 height-64">
  <img class="width-32 height-32 ... bg-tint-granite-5 overflow-hidden" src="...">
</div>

HTML

.dummy-parent {
  @extend
    .width-64,
    .height-64;
}
.dummy-image {
  @extend
    .width-32,
    .height-32,
    .bg-tint-granite-5,
    .overflow-hidden;
}

SCSS

Use (expand) variant to apply overflow to all child elements.

<div class="(expand)overflow-hidden">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

HTML

.dummy-parent {
  @extend
    .(expand)overflow-hidden;
}

SCSS