title: How to prevent Input element from exceeding width of CSS grid column
body: <p>I want to use CSS grid to manage the layout of multiple forms. The goal is to use a two-column grid with the label elements in the left column and the input elements in the right column. The left column's width needs to be sized to fit the widest label, and the right column should take up the remainder of the space. This is the grid column template I'm using:</p>
  <pre class="lang-css prettyprint-override"><code>grid-template-columns: max-content 1fr;
  </code></pre>
  <p>The issue that I'm facing is that the input element will frequently exceed the width of the right column. Unfortunately, setting <code>max-width</code> to 100% on the input element does not constrain its size to the column's width. If I set the <code>width</code> to 100%, that does constrain the size, but as the responsive form gets wider, a 100% width on the input is too wide from a design perspective.</p>
  <p>This is the markup:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;div class=&quot;container&quot;&gt;
    &lt;label&gt;This is label 1&lt;/label&gt;
    &lt;input type=&quot;text&quot; maxlength=&quot;100&quot;&gt;
    &lt;label&gt;This is label 2&lt;/label&gt;
    &lt;input type=&quot;text&quot; maxlength=&quot;100&quot;&gt;
    &lt;label&gt;This is label 3 which is a bit longer&lt;/label&gt;
    &lt;input type=&quot;text&quot; maxlength=&quot;100&quot;&gt;
    &lt;label&gt;This is label 4&lt;/label&gt;
    &lt;input type=&quot;text&quot; maxlength=&quot;100&quot;&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>This is the CSS:</p>
  <pre class="lang-css prettyprint-override"><code>*, *::before, *::after {
    box-sizing: border-box;
  }
  
  .container {
    width: 300px;
  /*   width: 1300px; */
    margin: 2rem auto;
    background-color:lightblue;
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
    grid-column-gap: 24px;
    grid-row-gap:8px;
  }
  
  input {
    padding: .5rem .5rem;
    max-width:100%;
  /*   width: 12rem; */
    justify-self: end;
  }
  </code></pre>
  <p>This is a <a href="https://codepen.io/Karl53/pen/gOvXwJK?editors=1100" rel="nofollow noreferrer">CodePen</a>.</p>
  <p><strong>Q:</strong> How do I limit the width of the input to about 200 pixels and keep it flushed right? At the same time, as the form gets narrower, it should never exceed the width of the grid column.</p>