Overflow-x overwritten by overflow-y

Question

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

Use `overflow-x: scroll;` instead of `overflow-x: visible;` as mentioned in my answer below. — Ahsan Khurshid, Jul 27 '12 at 09:37
No, I don't want overflow-x to be scrollable, I want it to be visible. I want a part of `content` to be out of `container`. — etnbrd, Jul 27 '12 at 09:45

score 5 · Answer 1 · answered Jul 27 '12 at 09:38

5

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.

answered Jul 27 '12 at 09:38

Guffa

687,336
108
737
1,005

8

Could you give me some reference about this ? – etnbrd Jul 27 '12 at 09:46

Ahsan Khurshid · Accepted Answer · 2012-07-27T09:59:48.787

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

Maybe I didn't explain well enough what I want. I want to make a list (might be long, therefore I need scrolling), and one element of this list could be active, and have a little arrow at the left edge, at the exterior of the `container` block, therefore I need `overflow-x` to be visible. — etnbrd, Jul 27 '12 at 09:38
I know this reference, and I know exactly what each of this options does. What I don't understand is why `visible` and `auto` can't be combined. I am using latest firefox and chrome, and none can display a scrollbar in the y direction and visible in the x direction. — etnbrd, Jul 27 '12 at 09:53
This is the browser behavior. `auto:` Depends on the user agent (desktop browser). Desktop browsers like Firefox provide scrollbars if content overflows. — Ahsan Khurshid, Jul 27 '12 at 09:55

Overflow-x overwritten by overflow-y

2 Answers2

Linked