Free online CSS overflow generator. Visually adjust overflow-x, overflow-y and overflow-behavior properties with real-time preview. Supports all overflow value combinations (visible, hidden, scroll, auto, clip). Perfect for frontend developers debugging container overflow behavior. Client-side only.
This container demonstrates overflow behavior.
When content exceeds container dimensions, the overflow property controls how it's handled.
Blue horizontal text shows X-axis overflow:
→ This is a long horizontal text that tests overflow-x clipping and scrolling behavior when the container width is insufficient.
↓ Vertical content also exceeds the container.
Additional content to overflow vertically for testing overflow-y effects.
Note: With 'visible' overflow, content renders outside the container!
visible（默认）：内容不会被裁剪，超出容器会显示在外部。hidden：超出部分被裁剪隐藏。scroll：始终显示滚动条（无论内容是否超出）。auto：仅在需要时显示滚动条。clip：类似hidden，但禁止程序化滚动，支持overflow-clip-margin属性。
可以。但需要注意，如果一个方向设置为visible，另一个方向设置为auto/scroll/hidden，visible会被强制改为auto。本工具会自动处理这种CSS规范限制，确保生成有效的代码。
overflow-behavior（CSS overscroll-behavior）控制浏览器到达滚动边界时的行为。auto（默认值）：浏览器的默认滚动边界行为。contain：阻止滚动链传播到父元素。none：不仅阻止传播，还阻止默认的滚动到边界效果（如Chrome的下拉刷新）。