| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Overflow | |
| 4 | description: Use these shorthand utilities for quickly configuring how content overflows an element. | |
| 5 | group: utilities | |
| 6 | toc: true | |
| 7 | --- | |
| 8 | ||
| 9 | Barebones `overflow` functionality is provided for two values by default, and they are not responsive. | |
| 10 | ||
| 11 | <div class="bd-example d-md-flex"> | |
| 12 | <div class="overflow-auto p-3 mb-3 mb-md-0 mr-md-3 bg-light" style="max-width: 260px; max-height: 100px;"> | |
| 13 | 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. | |
| 14 | </div> | |
| 15 | <div class="overflow-hidden p-3 bg-light" style="max-width: 260px; max-height: 100px;"> | |
| 16 | This is an example of using <code>.overflow-hidden</code> on an element with set width and height dimensions. | |
| 17 | </div> | |
| 18 | </div> | |
| 19 | ||
| 20 | {% highlight html %} | |
| 21 | <div class="overflow-auto">...</div> | |
| 22 | <div class="overflow-hidden">...</div> | |
| 23 | {% endhighlight %} | |
| 24 | ||
| 25 | Using Sass variables, you may customize the overflow utilities by changing the `$overflows` variable in `_variables.scss`. | |
