Display :before element on a flex container in ie11

Question

I have a flex container with a couple of children that I need to have a before element on. The before element displays if the parent container is display: block but not if it's display: flex ! is there a workaround for this?

:before doesn't work, but child container styling is fine:

<div class="parent">
  <div></div>
  <div></div>
</div>

<style lang="scss">
.parent {
  display: flex;
  justify-content: space-between;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    top: -20px;
    height: 20px;
    width: 100%;
    background: linear-gradient(180deg, transparent, $gray);
  }
}
</style>

:before works, but breaks my child element styling:

<div class="parent">
  <div></div>
  <div></div>
</div>

<style lang="scss">
.parent {
  display: block;
  position: relative;

  &:before {
    content: '';
    position: absolute;
    top: -20px;
    height: 20px;
    width: 100%;
    background: linear-gradient(180deg, transparent, $gray);
  }
}
</style>

Answer 1

Try to add margin-right:auto; CSS style for the first div element in the parent container.

Code as below (you could change the CSS style to SCSS style):

<div class="parent">
    <div style="background-color:coral;">content 1</div>
    <div style="background-color:pink;">content 2</div>
</div>

<style >
    .parent {
        display: flex;
        display: -ms-flexbox;
        justify-content: space-between;
        position: relative;
    }

        .parent::before {
            content: "";
            position: absolute;
            top: -20px;
            height: 20px;
            width: 100%; 
            background: linear-gradient(180deg , red, yellow);
            background-color: aqua;
        }

        .parent div:first-child { 
            margin-right:auto;
        } 
        .parent div {
            width: 70px;
            height: 70px;
            display: block;
        } 
</style> 

The result in IE11 browser like this: