CSS justify-content: space-between on IE11 works incorrect

Viewed 1450

In my project I have progressbar and it works fine in all browsers, except IE11 (<11 I do not support). In all browsers it looks like this:enter image description here

And in IE11 it looks like this: enter image description here I dont know why justify-content: space-between on IE11 works incorrect. This is my code for statusbar container:

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;
`;

This is my code for statusbar item:

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;
      }
    }
  }
`;
2 Answers

just replace the -ms-flex-pack: space-between; with -ms-flex-pack: justify;

I usually use these mixins:

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

Also, maybe the problem is with your parent, check out this, maybe it helps.

Related