Flexbox和盒子大小使弹性项目太小

Question

我使用display: flex创建了一个简单的页眉，内容，页脚框，其中页眉和页脚是流畅的高度，而内容占据了剩余的高度。

这在Firefox中运行良好，但在Chrome中，页眉和页脚都太小而无法满足其内容。

我设法将其追溯到使用box-sizing: border-box。删除它解决了这个问题。但我想知道这是一个已知的错误，或者甚至是一个功能？

这是一个小提琴：https://jsfiddle.net/x3Lb72vz/1/

* {
  box-sizing: border-box; // Comment this out to see how header and footer grow to fit their content
}

p {
  margin: 0 0 1rem;
}

.popup {
  background: rgba(0, 0, 0, .5);
  
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  
  // Center the box
  display: flex;
  align-items: center;
  justify-content: center;
  
  &__box {
    background: #fff;
    
    width: 80%;
    max-width: 20rem;
    max-height: 80%;
    
    display: flex;
    flex-direction: column;
  }
  
  &__header,
  &__content, 
  &__footer {
    padding: 1rem;
  }
  
  &__header {
    background: red;
    
    h2 {
      margin: 0;
      background: green;
    }
  }
  
  &__footer {
    background: green;
    
    p {
      background: red;
    }
  }
  
  &__content {
    padding: 0 1rem;
    flex: 1;
    overflow: auto;
  }
}

<section class="popup" id="my-popup">
  <div class="popup__box">
    <header class="popup__header">
      <h2>Test</h2>
    </header>
    <div class="popup__content">
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
      <p>Lorem ipsum dolor sit amet.</p>
    </div>
    <footer class="popup__footer">
      <p>Footer footer footer footer.</p>
      <p>Footer footer footer footer.</p>
    </footer>
  </div>
</section>