Show box-shadow outside of overflow area

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>

Solution

Can you add margins to the inner div's?

    #inner-div {
      margin: 10px
    }

check this JSFiddle

Comments

[Ieuan]

I added <div class="shadow"></div> to all blocks and styled that to be width: 100%; height: 100%; position: absolute;, but the blocks themselves have overflow: hiddden; as well which makes them not show up. See : ruun.nl/new

[Ieuan]

That is another option, but then the entire website would be off by 10 pixels because the container is centered and the blocks are within that

[musafar006]

@Ieuan reduce the width? width: calc(500px - 20px) or even width: (100% - 20px)

[Ieuan]

Thanks @dreamster! I now gave the container a 20px padding on the right side and that pretty much fixed it

[musafar006]

@Ieuan happy to help! :)