CSS not applied when display flex is used in microsoft edge

Question

I'm trying to apply border before and after the text. It works on all the browsers except for Microsoft edge and internet explorer. I'm using display: flex and please refer my code for details

I have tried setting max-width to 100% and adding box-sizing: border-box but doesn't seem to work

const text = styled(div)`
    display: flex;
    align-items: center;
    color: gray;
    margin-bottom: 24px;
    ::before, ::after {
        content: '';
        width: 100%;
        border-top: 1px solid gray;
      }
    ::before {
        margin-right: 8px;
      }
    ::after {
        margin-left:8px;
  }
`;
<text>OR</text> 

I need the border to show up in IE 11 as well

Answer 1

For IE11 , you need to reset display on the pseudo element and reset also flex-grow.

Your code becomes :

const text = styled(div)`
    display: flex;
    align-items: center;
    color: gray;
    margin-bottom: 24px;
    ::before, ::after {
        content: '';
        display:block;
        flex-grow:1;
        border-top: 1px solid gray;
      }
    ::before {
        margin-right: 8px;
      }
    ::after {
        margin-left:8px;
  }
`;
<text>OR</text> 

Demo below to run with IE.

text {
  display: flex;
  align-items: center;
  color: gray;
  margin-bottom: 24px;
  width:100%;
}

 text::before,
 text::after {
  content: '';
  display:block;
  flex-grow:1 ;
  border-top: 1px solid gray;
}

 text::before {
  margin-right: 8px;
}

 text::after {
  margin-left: 8px;
}

<text>OR</text>

is that the wandering haslayout ghost walking around since IE5 ??