MS Edge: overflow: hidden not working on box-shadow - html

Question

I have applied a large box-shadow to a position: absolute <div>. Its parent <div> has overflow: hidden set which (from my understanding) should hide any overflowing box-shadow – and this works just fine on Chrome but for some reason not on MS Edge.
See the example here:
.outerbox {
width: 600px;
height: 600px;
background-color: red;
}
.innerbox {
width: 300px;
height: 300px;
margin-top: 150px;
margin-left: 150px;
display: table;
background-color: #fff;
position: fixed;
overflow: hidden;
}
.shadowbox {
position: absolute;
left: 50px;
width: 200px;
top: 50px;
height: 200px;
box-shadow: 0px 0px 0px 100px rgba(0, 0, 0, 0.85);
}
<div class="outerbox">
<div class="innerbox">
<div class="shadowbox">
</div>
</div>
</div>
https://jsfiddle.net/8u43mztw/
When viewed on Chrome it appears as one would expect like this:
But when viewed on MS Edge it appears as follows:
For some reason on Edge, setting overflow: hidden on the box parent to the box on which the box-shadow has been applied has no effect. Chrome has no trouble hiding the overflowing box-shadow. Am I doing something wrong here, or is there a workaround?

Answer 1

In Firefox also. Try to remove display: table; from .innerbox: in Firefox works fine.
.outerbox {
width: 600px;
height: 600px;
background-color: red;
}
.innerbox {
width: 300px;
height: 300px;
margin-top: 150px;
margin-left: 150px;
background-color: #fff;
position: fixed;
overflow: hidden;
}
.shadowbox {
position: absolute;
left: 50px;
width: 200px;
top: 50px;
height: 200px;
box-shadow: 0px 0px 0px 100px rgba(0, 0, 0, 0.85);
}
<div class="outerbox">
<div class="innerbox">
<div class="shadowbox">
</div>
</div>
</div>