css - common box-shadow for multiple divs without parent - css

Question

Is there a way to style a row of divs with multiple box-shadows so they look like the box-shadow is on wrapping element?
Due to 3rd party lib limitation I cannot put a box-shadow on a parent element.
Here is the snippet - I cannot really get rid of the spaces between box-shadows.
.container {
/* THIS ELEMENT CANNOT HAVE BOX-SHADOW*/
display: flex;
flex-direction: row;
}
.child {
position: relative;
background-color: grey;
width: 160px;
height: 90px;
box-shadow: 0 -5px 5px -5px #333, 0 5px 5px -5px #333;
}
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>

Answer 1

you could apply the shadow to container::before and keep the pseudoelement under the children.
.container {
/* THIS ELEMENT CANNOT HAVE BOX-SHADOW */
display: flex;
flex-direction: row;
position: relative;
width: max-content;
}
.container::before {
content: "";
position: absolute;
z-index: 0;
top: 0; left: 0; right: 0; bottom: 0;
box-shadow: 0 -5px 5px -5px #333, 0 5px 5px -5px #333;
}
.child {
position: relative;
background-color: grey;
width: 160px;
height: 90px;
}
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>