2018-09-19 04:54:56 +02:00
---
layout: docs
title: Overflow
description: Use these shorthand utilities for quickly configuring how content overflows an element.
group: utilities
---
2020-10-12 23:51:05 +02:00
Adjust the `overflow` property on the fly with four default values and classes. These classes are not responsive by default.
2018-09-19 04:54:56 +02:00
< div class = "bd-example d-md-flex" >
2020-06-09 15:44:20 +02:00
< div class = "overflow-auto p-3 mb-3 mb-md-0 me-md-3 bg-light" style = "max-width: 260px; max-height: 100px;" >
2018-09-19 04:54:56 +02:00
This is an example of using < code > .overflow-auto< / code > on an element with set width and height dimensions. By design, this content will vertically scroll.
< / div >
2020-06-09 15:44:20 +02:00
< div class = "overflow-hidden p-3 mb-3 mb-md-0 me-md-3 bg-light" style = "max-width: 260px; max-height: 100px;" >
2018-09-19 04:54:56 +02:00
This is an example of using < code > .overflow-hidden< / code > on an element with set width and height dimensions.
< / div >
2020-06-09 15:44:20 +02:00
< div class = "overflow-visible p-3 mb-3 mb-md-0 me-md-3 bg-light" style = "max-width: 260px; max-height: 100px;" >
2020-07-21 10:24:38 +02:00
This is an example of using < code > .overflow-visible< / code > on an element with set width and height dimensions.
< / div >
< div class = "overflow-scroll p-3 bg-light" style = "max-width: 260px; max-height: 100px;" >
This is an example of using < code > .overflow-scroll< / code > on an element with set width and height dimensions.
< / div >
2018-09-19 04:54:56 +02:00
< / div >
2020-10-19 11:56:49 +02:00
```html
2018-09-19 04:54:56 +02:00
< div class = "overflow-auto" > ...< / div >
< div class = "overflow-hidden" > ...< / div >
2020-07-21 10:24:38 +02:00
< div class = "overflow-visible" > ...< / div >
< div class = "overflow-scroll" > ...< / div >
2020-10-19 11:56:49 +02:00
```
2018-09-19 04:54:56 +02:00
Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss` .
2021-02-11 04:29:59 +01:00
## Sass
### Utilities API
Overflow utilities are declared in our utilities API in `scss/_utilities.scss` . [Learn how to use the utilities API. ]({{< docsref "/utilities/api#using-the-api" >}} )
{{< scss-docs name = "utils-overflow" file = "scss/_utilities.scss" > }}