Why does a narrow viewport clip the left of my grid-container, in Chrome

Question

In this first snippet, when you make the viewport width very narrow, instead of the grid-container overflowing to the right, it seems to overflow symmetrically - both left & right. Regardless of what it's actually doing, the important thing is: it clips the text. Here's a video of how it looks on my screen: https://www.youtube.com/watch?v=IoOhamP17GI

1.

.info-container {
    display: grid; justify-content: center;
    grid-template-columns: auto auto;
    background: violet;
}

<section class="info-container">
<label for="first-name">First Name </label>
<input id="first-name">
</section>

Why is this/how do I stop that text from being clipped?

In this snippet, in the non-grid-container element, the text isn't clipped / all overflow goes to the right.

2.

div {
  min-width: 200px;
color: yellow;
  background-color: blue;
}

<div>min-width: 200px;</div>

P.S. I am using Chrome v90.

Answer 1

update your structure like below. The minmax(0,1fr) will force the input to shrink (related: Why does minmax(0, 1fr) work for long elements while 1fr doesn't?)

.info-container {
  display: grid;
  justify-content: center;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  background: violet;
}

label {
 text-align:right;
}
input {
  margin-right:auto;
}

<section class="info-container">
  <label for="first-name">First Name </label>
  <input id="first-name">
</section>