How to make a child divs wider than the scrollable parent-CodePudding

I am trying to make a child div overflowing the parent div. But the parent div needs to be scrollable.

See here:

It seems to be a though mission. Haven't found any solution for this issue.

CodePudding user response：

unfortunately like your container have an overflow-y : auto it's not possible

the spec implementation don't allow to have an overflow-x visible in addition to an overflow-y auto or scroll

see more details here CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

CodePudding user response：

If you want to use the normal flow then the answer of jeremy-denis is correct.

But you'll see that when you add a position: absolute; at your extended class that it will create the look you want. It allows for the element to flow outside of it's parent because it's taken out of the regular flow. Of course this means the rest of the flow of the other elements along with their positions get messed up as well.

Then that problem you could fix with Javascript but it will probably be a pain in the butt!