Prevent CSS Grid content from overflowing

Question

I am trying to center horizontally, using Css grid.

When grid container is smaller than contents, the contents overflows.

.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, but the container size can be changed easily (uses React)

How to make the container constrain the contents, when container size is smaller than the contents?

There are other solutions, but i am trying to understand how Css grid works.