当网格包含溢出项时，为什么网格会溢出父网格？

Question

将宽项目放置在网格中时（下图中的红色），网格将保留其宽度。

但是，当游戏中还有另一个网格时（蓝色，如下图所示），它将使父网格溢出，并向其中添加width: 100%似乎没有帮助。

为什么会这样？

您如何确保蓝色网格不会溢出红色容器？

.container {
  width: 200px;
  border: 4px solid black;
}

.grid1 {
  display: grid;
  border: 10px solid red;
  margin-bottom: 40px;
}

.grid2 {
  display: grid;
  border: 10px solid blue;
}

.item {
  width: 300px;
  background-color: #ccc;
}

<div class="container">
  <div class="grid1">
    <div class="item">Item</div>
  </div>
  <div class="grid1">
    <div class="grid2">
      <div class="item">Item</div>
    </div>
  </div>
</div>