Menu
On my website I need to use the css property overflow: overlay for a <div>.
However, it is not rendering in the browser and an inspection of the css in firebug shows that it isn't even there, but it is as it works in Chrome. I havn't tested out safari.
What must I change to get the overflow: overlay css property working?
Thanks
383
The overlay value of the overflow CSS property is a non-standard value to make scrollbars appear on top of content rather than take up space. This value is deprecated and related functionality being standardized as the scrollbar-gutter property.
To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.
Use overflow-x : scroll and overflow-y : hidden , or overflow: scroll hidden instead. Use overflow-x : hidden and overflow-y : scroll , or overflow: hidden scroll instead.
overflow: hiddenWith the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
Possible values for overflow are:
visible hidden auto scroll See here or here for a discussion of these.
Using any other value in different browsers will yield unpredictable results as they handle the incorrect value differently.
Edit: Following the comment, I've managed to find mention of overflow:overlay here.
overlay is described as:
Content is clipped and scroll bars are added when necessary.
Importantly its also said only to work in Safari or Chrome (ie WebKit).
This item on WebKit bugzilla suggest it is not long for this world in any case:
WebKit currently has a proprietary CSS overflow value called "overlay" which is undocumented and as far as I can tell from reading the code works exactly like "auto".
We should either remove it or rename it to "-webkit-overlay".
Update March 2016
Looks like overflow: overlay hasn't gone away. There are signs of it working it's way into the standards.
The difference between overlay and auto would only be that the scrollbars would appear over the top of the page content, and not cause it to take layout space.
See here for the discussion.
175
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
