Home/ Questions/Q 8295817
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T14:44:25+00:00

It seems that overflow-x and overflow-y don’t behave as I expect it to behave.

  • 0

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;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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’.

    • 0