Высота Div не оборачивает содержимое в IE

Question

В моем проекте у меня есть div, который отлично работает в любом браузере (даже край).Этот div содержит и h1 и a h3.Вот как это выглядит в любом обычном браузере:

Теперь вот как это выглядит в Internet Explorer 11:

Я использую стилизованные компоненты с реакции, и вот структура компонентов:

      <BoxContainer>
        <div>
          <BoxTitle onClick={this.toggleBox}>
            <ExpandArrow expanded={isHidden}>
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6 53.53">
                <polygon points="43.3 53.53 0 0 86.6 0 43.3 53.53" />
              </svg>
            </ExpandArrow>
            {box.type}
            <BoxIconWrapper>
              <img src={BoxIcon} alt="Box Icon" />
            </BoxIconWrapper>
          </BoxTitle>
          <BoxGeneralInfo>
            {box.producer}, {convertDate(box.cycle)}, {box.sealed ? 'Sealed' : 'Not Sealed'}
          </BoxGeneralInfo>
        </div>
        {this.renderContent(isHidden)}
      </BoxContainer>

И вот CSS для этих компонентов:

const BoxContainer = styled.div`
  margin-bottom: 30px;
`;

const BoxTitle = styled.h1`
  display: inline;
  margin: 0 0 0 -34px;
  font-size: 27px; 
  letter-spacing: -0.6px;
  cursor: pointer;
`;

const ExpandArrow = styled.span`
  margin-bottom: 5px;
  margin-right: 10px;

  & > svg {
    width: 13px;    
    fill: #adc6df;    
    transform: ${(props) => props.expanded ? 'rotate(-90deg)' : 'rotate(0)'};
    transition: 0.3s;
  }
`;

const BoxIconWrapper = styled.span`
  padding-top: 20px;
  margin-left: 10px;

  & > img {
    width: 17px;
    margin-bottom: 2px;
  }
`;

const BoxGeneralInfo = styled.h3`
  margin-top: -5px;
  margin-bottom: 10px;
  font-size: 15px;
  letter-spacing: -0.6px;
  font-weight: 600;
  color: #151b23;
`;

const BoxContent = styled.div`
  max-height: 0;
  transition: all 0.5s;
  overflow: hidden;
  ${(props) => props.visible ? 'min-height: 250px' : null};

  &:after {
    content: "";
    background-color: black;
    height: 2px;
    width: 100%;
    transform-origin: center;
    transition: 1s all 0.5s;
  }
`;

Я не уверен, почему он не работает в IE.Могли бы действительно помочь с этим!