Overflow Utilities

Shipyard’s overflow utilities are helpful in handling content that overflows the container.

.overflow-auto { overflow: auto }
.overflow-hidden { overflow: hidden }
.overflow-visible { overflow: visible }

@media screen and (min-width:  576px) {
  .sm:overflow-auto { overflow: auto }
  .sm:overflow-hidden { overflow: hidden }
  .sm:overflow-visible { overflow: visible }
}

@media screen and (min-width:  768px) {
  .md:overflow-auto { overflow: auto }
  .md:overflow-hidden { overflow: hidden }
  .md:overflow-visible { overflow: visible }
}

@media screen and (min-width:  992px) {
  .lg:overflow-auto { overflow: auto }
  .lg:overflow-hidden { overflow: hidden }
  .lg:overflow-visible { overflow: visible }
}

@media screen and (min-width:  1200px) {
  .xl:overflow-auto { overflow: auto }
  .xl:overflow-hidden { overflow: hidden }
  .xl:overflow-visible { overflow: visible }
}
.overflow-x-scroll { overflow-x: auto }

@media screen and (min-width:  576px) {
  .sm:overflow-x-scroll { overflow-x: auto }
}

@media screen and (min-width:  768px) {
  .md:overflow-x-scroll { overflow-x: auto }
}

@media screen and (min-width:  992px) {
  .lg:overflow-x-scroll { overflow-x: auto }
}

@media screen and (min-width:  1200px) {
  .xl:overflow-x-scroll { overflow-x: auto }
}
.overflow-y-scroll { overflow-y: auto }

@media screen and (min-width:  576px) {
  .sm:overflow-y-scroll { overflow-y: auto }
}

@media screen and (min-width:  768px) {
  .md:overflow-y-scroll { overflow-y: auto }
}

@media screen and (min-width:  992px) {
  .lg:overflow-y-scroll { overflow-y: auto }
}

@media screen and (min-width:  1200px) {
  .xl:overflow-y-scroll { overflow-y: auto }
}