Div高度未包含IE中的内容

Question

在我的项目中，我有一个div，可以在任何浏览器（甚至边缘）中正常工作。这个div包含和h1和一个h3。以下是它在任何普通浏览器中的外观：

现在，它在Internet Explorer 11中的外观如下：

我使用带有react的样式化组件，这里是组件结构：

      <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中工作。真的可以对此有所帮助！