overflow-y overrides overflow-x

Question

I need a div that has a lot of content and scrolls horizontally. The content (inner divs) has dropdown menus, and when the menus are opened they are supposed to render beyond the outer div's borders.

Like so:

But when i set

overflow-x: scroll;
overflow-y: visible;

my dropdowns aren't opened properly, they are contained within the wrapper div and I need to scroll down vertically to see them.

JSFiddle: https://jsfiddle.net/dk58t1ay/1/

It looks like overflow-x:scroll overrides overflow-y:visible. What can I do about it?

Please check this link:-http://stackoverflow.com/questions/6497373/make-content-horizontally-scroll-inside-a-div — Razia sultana, Nov 12 '16 at 14:27
I think you will have to use `position: absolute` on first card to do this https://jsfiddle.net/dk58t1ay/3/ — Nenad Vracar, Nov 12 '16 at 14:28
@NenadVracar then this element stops scrolling horizontally. I need to sroll it with other elements. — kurtgn, Nov 13 '16 at 09:21

score 1 · Answer 1 · answered Nov 12 '16 at 14:35

1

You can do it via position: absolute to your .card, but you need to rewrite your styles for other elements.

https://jsfiddle.net/dk58t1ay/6/

answered Nov 12 '16 at 14:35

P.S.

15,970
14
62
86

then this element stops scrolling horizontally. I need to sroll it with other elements. – kurtgn Nov 13 '16 at 09:21
It doesn't scroll anymore because you need to rewrite styles for your inner elements, they positioned a little differ now. – P.S. Nov 13 '16 at 09:44

overflow-y overrides overflow-x

1 Answers1