Menu
It seems that overflow-x and overflow-y don't behave as I expect it to behave.
If I set overflow-x to visible, and overflow-y to auto, overflow-x won't behave as visible, but as hidden.
Am I missing something, or is this normal?
Here is an example.
HTML:
</html
<body>
<div class='container'>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
</div>
</body>
</html>
CSS:
.container {
background: rgba(0, 0, 0, 0.1);
width: 200px;
height: 100px;
overflow-y: auto;
overflow-x: visible;
}
.content {
border: 1px solid rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.6);
position: relative;
margin-left: -14px;
padding-left: 14px;
}
298
asked Sep 02 '25 09:09
Actually overflow-x will act as auto in your example.
There are some combinations of overflow-x and overflow-y that can't be combined, because they simply don't work. You can't have content that is scrollable inside the container in one direction, and visible outside the container in the other direction.
189
EDITED: After more details by OP:
The overflow CSS property specifies whether to clip content, render scroll bars or display overflow content of a block-level element.
Using the overflow property with a value different than visible, its default, will create a new block formatting context. This is technically necessary as if a float would intersect with the scrolling element it would force to rewrap the content of the scrollable element around intruding floats. The rewrap would happen after each scroll step and would be lead to a far too slow scrolling experience. Note that, by programmatically setting scrollTop to the relevant HTML element, even when overflow has the hidden value an element may need to scroll.
Values of Overflow:
visible: Default value. Content is not clipped, it may be rendered outside the content box.
hidden: The content is clipped and no scrollbars are provided.
scroll: The content is clipped and desktop browsers use scrollbars, whether or not any content is clipped. This avoids any problem with scrollbars appearing and disappearing in a dynamic environment. Printers may print overflowing content.
auto: Depends on the user agent. Desktop browsers like Firefox provide scrollbars if content overflows.
See Reference
Added More Details:
from: http://www.brunildo.org/test/Overflowxy2.html
In Gecko, Safari, Opera, ‘visible’ becomes ‘auto’ also when combined with ‘hidden’ (in other words: ‘visible’ becomes ‘auto’ when combined with anything else different from ‘visible’). Gecko 1.8, Safari 3, Opera 9.5 are pretty consistent among them.
also the W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.
26
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
