防止CSS网格内容溢出

Question

我正在尝试使用Css网格水平居中。

当网格容器小于内容时，内容溢出。

.container {
  display: grid;

  grid-template-columns: 1fr auto 1fr;

  background: rgb(234, 247, 179);
  width: 200px;
  height: 150px;
}

.mid {
  grid-column: 2;
  max-width: 100%;
}

.content {
  background: rgb(142, 225, 250);
  width: 250px;
  max-width: 100%;
}

<p>
  content div overflows if container width is less than content width 
</p>
<div class="container">
  <div class="mid">
    <div class="content">
      some content .........................
    </div>
  </div>
</div>

Same demo，但是容器大小可以轻松更改（使用React）

当容器的尺寸小于容器的内容时​​，如何使容器约束？

还有其他解决方案，但我试图了解Css网格的工作原理。