CSS justify-content: пробел в IE11 работает некорректно

Question

В моем проекте есть прогрессбар, и он отлично работает во всех браузерах, кроме IE11 (<11 я не поддерживаю). Во всех браузерах это выглядит так: <a href="https://i.stack.imgur.com/JrxT9.png" rel="nofollow noreferrer">

А в IE11 это выглядит так: Я не знаю, почему justify-content: space- между на IE11 работает некорректно. Это мой код для контейнера строки состояния:

export const ProgressBarContainer = styled.div`
  display: flex;
  display: -ms-flexbox;
  width: 95%;
  flex-direction: row;
  -ms-flex-direction: row;
  justify-content: space-between;
  -ms-justify-content: space-between;
  margin-left: 20px;
  position: relative;
`;

export const ProgressLineStyled = styled.div`
  width: 100%;
  position: absolute;
  left: 0px;
  bottom: 11px;
  height: 2px;
  background: ${({ theme }) => theme.lightText};
  z-index: 0;
`;

export const ResultLineStyled = styled(ProgressLineStyled)`
  background: #445b9d;
  width: auto;
`;

Это мой код для элемента строки состояния:

export const ItemText = styled.div`
  font-size: 12px;
  color: ${({ theme }) => theme.text};
  text-transform: uppercase;
  font-weight: 600;
  position: absolute;
`;

export const ItemDot = styled.div`
  width: 24px;
  height: 24px;
  margin-top: 24px;
  display: flex;
  display: -ms-flexbox;
  align-items: center;
  -ms-flex-align: center;
  justify-content: center;
  -ms-flex-pack: center;
  box-sizing: border-box;
  border-radius: 50%;
  z-index: 1;
  background: #ffffff;
  border: 2px solid ${({ theme }) => theme.lightText};
  & div {
    border-radius: 50%;
    box-sizing: border-box;
  }
`;

export const ProgressItemStyled = styled.div`
  display: flex;
  display: -ms-flexbox;
  flex-direction: column;
  -ms-flex-direction: column;
  align-items: center;
  -ms-flex-align: center;

  &#select {
    ${ItemText} {
      color: #445b9d;
    }
    ${ItemDot} {
      border: 2px solid #445b9d;
      & div {
        width: 6px;
        height: 6px;
        border: 1px solid #445b9d;
        background: #445b9d;
      }
    }
  }
  &#completed {
    ${ItemDot} {
      background: #445b9d;
      border-color: #445b9d;
      & div {
        width: 6px;
        height: 6px;
        border: none;
        background: #ffffff;
      }
    }
  }
`;

Answer 1

Я обычно использую эти миксины:

  -webkit-justify-content: space-between;
  -moz-justify-content: space-between;
  -ms-justify-content: space-between;
  justify-content: space-between;
  -ms-flex-pack: space-between;

Также, возможно, проблема в вашем родителе, проверьте это , возможно, это поможет.

Answer 2

просто замените -ms-flex-pack: space-between; на -ms-flex-pack: justify;