Blazorise Overflow Utilities

Control scrolling and clipping behavior with a fluent overflow builder.

Overflow utilities let you manage content that exceeds its container, keeping layouts predictable and reducing the need for custom CSS.

How it works

Apply Overflow to any component and choose Auto, Hidden, Scroll, or Visible. This is useful for scrollable panels, clipped media, and keeping the rest of the layout stable when content grows.

Examples

Scrollable and clipped panels

These panels show how different overflow modes affect content when the container has fixed dimensions, letting you choose between scrolling, clipping, or letting content flow outside. The next example demonstrates horizontal scrolling for long, single-line content, followed by a scrollable list panel for stacked items.

This is an example of using Overflow.Auto on an element with set width and height dimensions. By design, this content will vertically scroll.
This is an example of using Overflow.Hidden on an element with set width and height dimensions.
This is an example of using Overflow.Visible on an element with set width and height dimensions.
This is an example of using Overflow.Scroll on an element with set width and height dimensions.
This line is intentionally long to demonstrate horizontal scrolling when content exceeds the width of the container.
  • Scrollable list item one
  • Scrollable list item two
  • Scrollable list item three
  • Scrollable list item four
  • Scrollable list item five
<Div Display="Display.Flex.Row.OnDesktop">
    <Div Overflow="Overflow.Auto" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromEnd.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
        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>
    <Div Overflow="Overflow.Hidden" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromEnd.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
        This is an example of using <code>Overflow.Hidden</code> on an element with set width and height dimensions.
    </Div>
    <Div Overflow="Overflow.Visible" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromEnd.OnDesktop" Background="Background.Light" Style="max-width: 260px; max-height: 100px;">
        This is an example of using <code>Overflow.Visible</code> on an element with set width and height dimensions.
    </Div>
    <Div Overflow="Overflow.Scroll" Padding="Padding.Is3" Margin="Margin.Is3.FromBottom.Is0.FromBottom.OnDesktop.Is3.FromEnd.OnDesktop" Background="Background.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>
</Div>

<Div Overflow="Overflow.Auto" Padding="Padding.Is3" Margin="Margin.Is3.FromTop" Background="Background.Light" Style="max-width: 260px; white-space: nowrap;">
    This line is intentionally long to demonstrate horizontal scrolling when content exceeds the width of the container.
</Div>

<Div Overflow="Overflow.Auto" Padding="Padding.Is3" Margin="Margin.Is3.FromTop" Background="Background.Light" Style="max-width: 260px; max-height: 120px;">
    <UnorderedList>
        <UnorderedListItem>Scrollable list item one</UnorderedListItem>
        <UnorderedListItem>Scrollable list item two</UnorderedListItem>
        <UnorderedListItem>Scrollable list item three</UnorderedListItem>
        <UnorderedListItem>Scrollable list item four</UnorderedListItem>
        <UnorderedListItem>Scrollable list item five</UnorderedListItem>
    </UnorderedList>
</Div>
On this page