CSS网格-填充导致子元素溢出

Question

这是我的代码：

.media {
  display: grid;
  box-sizing: border-box;
  padding: 10rem;
  border: 1px solid red;
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
}

.big-pic {
  width: 100%;
  height: 10rem;
  border: 1px solid blue;
}

.small-pic {
  display: inline-block;
  margin-right: -.5rem;
  width: 50%;
  height: 10rem;
  border: 1px solid blue;
}

<div class="media">
  <div class="column">
    <h2>On TV</h2>
    <div class="big-pic">
      Main Pic
    </div>
    <div class="small-pic">
      Pic 1
    </div>
    <div class="small-pic">
      Pic 2
    </div>
  </div>

  <div class="column">
    <h2>In Theaters </h2>
    <div class="small-pic">
      Pic 1
    </div>
    <div class="small-pic">
      Pic 2
    </div>
    <div class="big-pic">
      Main Pic
    </div>
  </div>

降低浏览器的屏幕尺寸时，子元素将从容器中溢出。为什么column (a wrapper <div> with a class of column)宽度不能满足父母的宽度？

我使用了grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));，因此1fr应该可以填满父母的宽度。当您添加填充时，它会溢出。没有填充，它将填充父级的宽度。不知道发生了什么。

添加box-sizing: border-box也不能解决问题。关于如何解决它的任何想法？