---
title: Overflow
position: 9
seo_title: Telerik and Kendo UI Overflow Utilities
seo_description: Use the Telerik and Kendo UI Overflow utilities to control the
  overflow behavior of an element.
---
## Overflow

The Telerik and Kendo UI Overflow Utilities are CSS utility classes that enable you to control the overflow behavior of an element.

<CSSRulesList data='{"id":"overflow"}'></CSSRulesList>

### Visible Overflow

Use the `k-overflow-visible` utility to prevent the content of an element from being clipped when it overflows.

<LiveDemo data='{"links":[],"demo":"utils/layout/overflow/visible","height":200,"codePreviewSettings":{"ignoreClassNames":"k-border-solid k-border-2 k-w-1/5 k-h-1/12","customHtml":"<div class=\"k-overflow-visible k-border k-border-secondary k-w-1/2 k-h-1/3\">\n  ...\n</div>"}}'></LiveDemo>

### Hidden Overflow

Use the `k-overflow-hidden` utility to clip the content of an element when it overflows.

<LiveDemo data='{"links":[],"demo":"utils/layout/overflow/hidden","height":200,"codePreviewSettings":{"ignoreClassNames":"k-border-solid k-border-2 k-w-1/5 k-h-1/12","customHtml":"<div class=\"k-overflow-hidden k-border k-border-secondary k-w-1/2 k-h-1/3\">\n  ...\n</div>"}}'></LiveDemo>

### Horizontal Scrolling

Use the `k-overflow-x` utility to control the horizontal scrolling behavior of an element.

<LiveDemo data='{"links":[],"demo":"utils/layout/overflow/horizontal","height":200,"codePreviewSettings":{"ignoreClassNames":"k-white-space-nowrap k-w-1/4 k-h-1/4 k-border-solid k-border-2","customHtml":"<div class=\"k-overflow-x-scroll k-border k-border-secondary k-w-1/2 k-h-1/3\">\n  ...\n</div>"}}'></LiveDemo>

### Vertical Scrolling

Use the `k-overflow-y` utility to control the vertical scrolling behavior of an element.

<LiveDemo data='{"links":[],"demo":"utils/layout/overflow/vertical","height":200,"codePreviewSettings":{"ignoreClassNames":"k-border-solid k-border-2 k-w-1/4 k-h-1/12","customHtml":"<div class=\"k-overflow-y-scroll k-border k-border-secondary k-w-1/2 k-h-1/3\">\n  ...\n</div>"}}'></LiveDemo>