Generate Your Own Playground
Type any CSS property and get a live, editable playground instantly.
.container { height: 200px; width: 300px; border: 2px solid #333; overflow: hidden; }
.scrollable { height: 400px; overflow-y: scroll; overscroll-behavior: contain; overscroll-behavior-block: contain; background-color: #f0f0f0; padding: 10px; }The 'overscroll-behavior-block' CSS property controls the behavior of scrolling when reaching the boundary of a scroll container in the block direction (vertical). By setting this property, you can prevent the scroll from propagating to the parent element, which can enhance user experience by keeping the focus within a specific content area.
.container { height: 200px; width: 300px; overflow: auto; border: 2px solid #333; overscroll-behavior: contain; } .inner { height: 600px; width: 100%; background: linear-gradient(to bottom, #ffcc00, #ff6699); }The 'overscroll-behavior' CSS property controls the behavior of a container when it reaches the boundary of its scrollable area. It can prevent the default scroll chaining behavior, allowing for better control over scrolling in nested scrollable elements. This is particularly useful for improving user experience in mobile applications.
.container { width: 300px; height: 150px; border: 1px solid #000; overflow-y: scroll; padding: 10px; }The 'overflow-y' CSS property controls the vertical overflow of content within an element. It determines how content that exceeds the height of its container is handled, allowing for options like scrolling, hidden content, or visible overflow. This property is particularly useful for creating scrollable areas in web layouts.
.container { width: 200px; border: 1px solid black; overflow-x: scroll; }
.content { width: 400px; }The 'overflow-x' CSS property controls the horizontal overflow of an element's content. It determines how content that exceeds the width of its container is handled, allowing you to set it to 'visible', 'hidden', 'scroll', or 'auto'. This property is particularly useful for managing layout issues when content does not fit within its designated space.
.container { width: 200px; border: 1px solid #000; padding: 10px; overflow-wrap: break-word; }The 'overflow-wrap' CSS property controls how text wraps within an element when it exceeds the width of its container. It helps to prevent overflow by allowing long words to be broken and wrapped onto the next line, improving text readability in constrained spaces.