CSS:overflow

lastmod 2025-03-26created 2023-06-155 edits

overflow-x

Along the x-axis.

overflow-y

Along the y-axis.

Making the Scroll area 100% in size

• (CSS) How to make the scroll area 100% in size — Conquering the world with coding

First, set the parent component to position: relative:

height: 100%;
width: 100%;
position: relative;

Set the child component with the overflow property to position: absolute:

position: absolute;
width: 100%;
height: 100%;
overflow-y: auto;
overflow-x: hidden;

When things like a Tooltip are not visible

If something like a Tooltip is not visible in an ordinary situation, check whether any of the ancestor Elems is set to overflow: hidden.

Showing an Element hidden by Overflow

• CSS { In Real Life } | Oh No, Overflow! - Solving it for the outer elem with :has().
• Experience in Escape CSS Overflow | by Jen-Hsuan Hsieh (Sean) | A Layman | Medium - Requires a Medium login. Note that this method uses javascript.
• Popping Out of Hidden Overflow | CSS-Tricks - CSS-Tricks - This one also uses javascript.

For Tooltips

There is a post saying that when using a Tooltip, you should refer to the tooltip role and consider using js... The related material is ARIA: tooltip role - Accessibility | MDN.

See also

• CSS

Favorite site

• [Recommended] overflow-x, overflow-y (CSS3 properties) - Tests how the state changes with overflow settings