Show box-shadow outside of overflow area [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this 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

Answer 2

try this one:
div {
top: 100px;
position: absolute;
left: 100px; height: 50px;
width: 200px;
-webkit-box-shadow:
5px 5px 5px #000,
inset 0 0 5px #000;
border-radius: 5px;
background: white;
}
UPDATED DEMO