Escaping CSS overflow of parent or ancestor īy moving the height restriction and background colour to the wrapper, but keeping the width and X axis overflow restrictions on the container, we have created the overflow effect we were after. The solution is simple, if not a little bit hacky. So, by restricting the height of the container we are forcing the Y overflow condition to be used, which is either set to ‘auto’, ‘scroll’ or ‘hidden’ when ‘overflow-x: hidden’ is set. We now know that if we set overflow to ‘hidden’ on a single axis that the second axis is going to be assumed. In the example above we still want to overflow our element on the Y axis but not on X. … Bugger, ‘overflow-x: hidden’ and ‘overflow-y: visible’ can’t be used in combination. No problem, right? Now we just set ‘overflow-y: visible’… We can fix the X axis overflow by adding ‘overflow-x: hidden’ but by doing so overflow-y becomes assumed as ‘auto’. In this example we want the text to overflow on the Y axis but not on the X axis. Overflowing content shouldn't be visible on the X axis. I want my content to overflow on the Y axis only. We want the container to have a fixed height of ’50px’ and a fixed width of ’50px’. Let’s assume that we have an element with class ‘.container’.
Using overflow-x and overflow-y is a little more ambiguous. I can't overflow the bounds of the container Once set to a parent, child content can’t overflow the bounds set by the parent. Principally ‘overflow: hidden’ works as you would expect. Facebook Share Twitter Share LinkedIn Share
0 kommentar(er)
