---
title: "Content Overflow | @layout"
description: "Handle overflowing content."
keywords: ["layout", "overflow", "hidden", "scroll"]
---

# Content Overflow

Handle overflowing content.

Usage:

- `@layout overflow-*;`
- `@layout overflow-x-*;`
- `@layout overflow-y-*;`

<Alert variant="info">

This page contains only the **property configuration reference**. Complete
documentation and usage examples will be added progressively in future updates.

</Alert>

---

<section>

## Reference

```js title="shilp.config.js"
const shilpConfig = {
	source: "react",

	properties: {
		layout: {
			overflow: {
				DEFAULT: {
					property: "overflow: <v><i>;",
					values: {
						auto: "auto",
						visible: "visible",
						hidden: "hidden",
						scroll: "scroll",
					},
				},

				x: {
					property: "overflow-x: <v><i>;",
					values: {
						auto: "auto",
						visible: "visible",
						hidden: "hidden",
						scroll: "scroll",
					},
				},

				y: {
					property: "overflow-y: <v><i>;",
					values: {
						auto: "auto",
						visible: "visible",
						hidden: "hidden",
						scroll: "scroll",
					},
				},
			},
		},
	},
};

export default shilpConfig;
```

</section>