Why `Box-shadow` Is not displayed at the bottom in IE11? - html

Question

I added box-shadow using pseudo selector to a display: flex; flex-flow: row wrap; element it's working in chrome and safari but in IE11 it get floats to the right side not the bottom, I think its because of flex-flow: row wrap;. any thoughts on whats goin on?
.main {
max-width: 1200px;
overflow: hidden;
height: 600px;
}
img {
display: block;
}
.hero-image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
position: relative;
}
.hero-image::after {
display: block;
position: absolute;
content: '';
width: 100%;
-webkit-box-shadow: 0 -5px 50px #000;
box-shadow: 0 -5px 50px #000;
height: 100%;
z-index: 99;
}
.div--1 {
flex-basis: 100%;
order: 1;
height: auto;
}
.div--2 {
background-color: #333d47;
padding: 10px 40px;
line-height: 1;
flex-basis: 100%;
text-align: center;
color: #FFF;
order: -1;
}
<div class="main">
<div class="hero-image">
<div class="div--1">
<img src="https://picsum.photos/1200/300?image=0" />
</div>
<div class="div--2">some text here</div>
</div>
</div>

Answer 1

You are just missing a top: 0; on .hero-image::after. Otherwise the shadow will be pulled down by the text and the image.
.main {
max-width: 1200px;
overflow: hidden;
height: 600px;
}
img {
display: block;
}
.hero-image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
position: relative;
}
.hero-image::after {
display: block;
position: absolute;
top: 0;
content: '';
width: 100%;
-webkit-box-shadow: 0 -5px 50px #000;
box-shadow: 0 -5px 50px #000;
height: 100%;
z-index: 99;
}
.div--1 {
flex-basis: 100%;
order: 1;
height: auto;
}
.div--2 {
background-color: #333d47;
padding: 10px 40px;
line-height: 1;
flex-basis: 100%;
text-align: center;
color: #FFF;
order: -1;
}
<div class="main">
<div class="hero-image">
<div class="div--1">
<img src="https://picsum.photos/1200/300?image=0" />
</div>
<div class="div--2">some text here</div>
</div>
</div>

Answer 2

The shadow is over the image:
.main {
max-width: 1200px;
overflow: hidden;
height: 600px;
}
img {
display: block;
}
.hero-image {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
width: 100%;
position: relative;
}
.div--1::after {
display: block;
position: relative;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0)), to(#000));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%);
margin-top: -120px;
height: 120px;
width: 100%;
content: '';
}
.div--1 {
flex-basis: 100%;
order: 1;
height: auto;
}
.div--2 {
background-color: #333d47;
padding: 10px 40px;
line-height: 1;
flex-basis: 100%;
text-align: center;
color: #FFF;
order: -1;
}
<div class="main">
<div class="hero-image">
<div class="div--1">
<img src="https://picsum.photos/1200/300?image=0" />
</div>
<div class="div--2">some text here</div>
</div>
</div>