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 }
}