Inadequate overflow, someone stop it!!!?

Question

css

In general, here is the whole problem: I need to hide all elements that go beyond Y, but at the same time I need to make a pop-out element in X, but if I set overflow-y: hidden, then overflow-x flatly refuses to be anything but auto, even if you explicitly point it to visible.
Is this a bug in css or am I dumb? What crutch can you come up with?
The layout is as follows: https://jsfiddle.net/9cvr6x23/6/ --- The green block should protrude 20px beyond the red one.

Answer 1

Reading what the W3C says , add the features of some browsers to this and we get that if you apply overflow visible to one coordinate (x / y) and some other overflow to another, then as a result overflow visible turns into auto. This is not a "flaw in css" - this is the standard. And the "crutch" is another container (i.e. you can do overflow-x: visible on the parent, and overflow-y: hidden on the child element)

Answer 2

Ivan's solution, in my opinion, does not fit, because the problem is deeper.
This is my slider parent element - this is the slide in which you need to place a daughter that goes beyond the edges. All slides are in a container and the container is in a block with overflow.
Well, this outgoing element must be different on each slide, that is, it must be attached exclusively to the block with the slide, otherwise a lot of these elements simply clump together.