How to create a scrolling DIV without cropping overflow-x?

Question

I have a DIV that is only supposed to scroll vertically. I would like to have an element inside this DIV overflow horizontally without being cropped. This is the desired effect:

I thought that if I only specified overflow-y:scroll, it would only crop the vertical overflow. However, I was wrong and this is what really happens:

CSS:

ol {
    border: 1px solid red;
    overflow-y: scroll;
    height: 20em;
    width: 7em;
}

JSFiddle:

http://jsfiddle.net/u6d6W/1/

Answer 1

Interesting question! I thought you just had to specify the overflow-x as visible, but after trying I found out I was wrong. I've never came across such a situation, so I did some research.

Here is what the W3C spec says (emphasis mine):

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

I don't know what's the rationale behind this spec, but apparently that is not a bug, but a feature :).

However, I have tested by setting the overflow-x to visible and the overflow-y to hidden and it still sets my overflow-x to auto (which is the scrolling behavior), in Chrome 25. I believe this might be a bug.