How to create a scrolling DIV without cropping overflow-x?
css, overflow, scroll
Solution
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.
Problem
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/