CSS – Show shade for the child element inside the parent container, which has overflow: hidden property.

I need help with CSS Masters.

I have a container that must be overflowing: I have a baby element inside it that needs to be shaded which is more than a parent container I think you think we won’t see shade up and down But I need I can’t play with the parent container margins and padding because all the markup is in motion.

Any ideas?

.parent{
    display: block;
    white-space: nowrap;
    min-height: 288px;
    padding-inline-start: 96px;
    padding-inline-end: 96px;
    overflow: hidden;
    padding-bottom: 24px;
    padding-top: 24px;
}

.children{
 box-shadow: 0px 12px 24px #12121240;
}

So the shadow is more than 288 px.

[![enter image description here][1]][1]
[1]: https://i.stack.imgur.com/Eg5dA.png.