Add overflow properties to X or Y axis. This can be useful for special cases where content might be too large (ex: a large table on mobile view) for the viewport.
Overflow properties can be defined for specific breakpoints, using mobile-first approach. See the syntax below.
The BEM class syntax is the following (breakpoint is optional):
| Heading1 | Heading2 | Heading3 |
|---|---|---|
| Loremipsdolorsitnsueliccusamu | Cell | Cell |
| Cell | Peiplaceauideuisuoandaetemporibus | Cell |
| Cell | Cell | Loremipsumdolosiamrmporibus |
<!-- overflow X -->
<div class="ui-overflow--x--auto">...</div>
<div class="ui-overflow--x--visible">...</div>
| Heading1 | Heading2 |
|---|---|
| Row 1 lorem ipsum dolor | Row 1 |
| Row 2 lorem ipsum dolor sit amror esse et exet, conse plicror esse et exabo harum id, itaque, laudctetur adipisicing elit. | Row 2 |
| Row 3 periam consectetur erantium molestiae neque praesentium sint soluta veniam! Fugit pariatur quia sit ut voluptatibus. | Row 3 |
<!-- overflow Y -->
<div class="ui-overflow--y--auto">...</div>
<div class="ui-overflow--y--visible">...</div>
In the examples above, the properties are set by default for all breakpoints, but this can be defined for specific breakpoints. For example:
| Heading1 | Heading2 | Heading3 |
|---|---|---|
| Loremipsdolorsitnsueliccusamu | Cell | Cell |
| Cell | Peiplaceauideuisuoandaetemporibus | Cell |
| Cell | Cell | Loremipsumdolosiamrmporibus |
<!-- overflow X auto starts on breakpoint xsmall -->
<!-- on breakpoint small, we revert to overflow visible -->
<div class="ui-overflow ui-overflow--xsmall--x--auto ui-overflow--small--x--visible">...</div>