Show box-shadow outside of overflow area [closed]

Question

I have a few boxes inside a container. The container is set to overflow: hidden to make sure everything stays in its place. Taking away overflow: hidden is not an option because doing so allows content to overflow where it would otherwise resize to fit the container.

I'm trying to give the boxes a box-shadow, but when doing so, the shadows on the edge of the boxes at the edge of the container are not showing up (see image below), because the parent container stops there and has no overflow.

As indicated by the green arrows, the two boxes at left show their shadows as expected. As indicated by the red arrows, the two boxes at right have their shadows cropped at the right edge where each meets the container.

Is there any way to hack around this?

A simple reproduction:
Note: This code snippet was added by a community editor, not the author, as an attempt to reproduce the symptoms. It does not reflect the actual code used by the author to produce the attached image.

.container {
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1rem;
  row-gap: 1rem;
}

.shadow {
  display: inline-block;
  height: 2rem;
  background-color: tomato;
  box-shadow: 0 0 0.25rem black;
}

<div class="container">
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
  <div class="shadow"></div>
</div>

Answer 1

Can you add margins to the inner div's?

    #inner-div {
      margin: 10px
    }

check this JSFiddle