How to correctly drop an inset shadow on a DIV that will also cover the DIV inside it?

Question

I have a container <div> that has an inset shadow. Inside it, I have another <div>, one with 100% height and it's own background-color.
The shadow, while working normally on the empty areas inside the container, doesn't work at all on the places where the another <div> is.

.main_body {
    width: 103%;
    position: relative;
    left: -20px;
    height: 300px;
    -webkit-box-shadow:inset 0 0 8px 3px #8C8C8C;
    box-shadow:inset 0 0 8px 3px #8C8C8C;
    background-color: #F0F0F0;
    overflow: hidden;
    z-index: 20000;
}

div#mainContainer {
    height: 100%;
    background-color: darkblue;
    width: 85%;
    position: absolute;
    left: 11px;
    z-index: -20;
}

<div class="main_body"><!--The container, outer DIV-->
   <div id="mainContainer"><!--the inner DIV-->
   </div>
</div>

^ I'm sure you've seen prettier, but I simplified it as much as possible so that it will be easier to understand.

Anyway, I've tried just about everything, from z-index to position: relative, and have searched everywhere, but couldn't find a fix to it. Any ideas?

Answer 1

The simple answer is you can't. Child elements will always sit above a box-shadow

As a work around you could use a pseudo element...

.main_body {
    width: 103%;
    position: relative;
    left: -20px;
    height: 300px;
    background-color: #F0F0F0;
    overflow: hidden;
    z-index: 20000;
    color: #FFF;
}

div#mainContainer {
    height: 100%;
    background-color: darkblue;
    width: 85%;
    position: absolute;
    left: 11px;
    z-index: -20;
}

.main_body:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-box-shadow:inset 0 0 8px 3px #8C8C8C;
    box-shadow:inset 0 0 8px 3px #8C8C8C;
    pointer-events: none; /* required to allow interaction with elements behind - All proper browsers and IE11+ */
}

<div class="main_body"><!--The container, outer DIV-->
   <div id="mainContainer"><!--the inner DIV-->
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet dolor est. Ut mattis nisl at ipsum pulvinar ultricies. Phasellus rutrum sem neque, eu auctor orci tristique eu. Sed quis felis ligula. Phasellus id molestie libero. Nullam vel nibh eu nisi iaculis viverra nec et nisl. Donec vitae maximus ante.
   </div>
</div>

Answer 2

Remove background-color and z-index from .main_body.

If .main_body needs a background then you'll have to add another div to achieve the desired effect.