title: Adapt the Angular Material input field to screen width
body: <p>I want to make a two equal column grid with CSS grid system. In each of the columns I want to put an input field that takes the 100% of the column's width.
  To achieve this I have this html:</p>
  
  <pre><code>&lt;div class="grid"&gt;
  
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder="Title"&gt;
    &lt;/mat-form-field&gt;
  
    &lt;mat-form-field&gt;
      &lt;input matInput placeholder="Title"&gt;
    &lt;/mat-form-field&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>And this CSS:</p>
  
  <pre><code>.grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 2em;
  }
  </code></pre>
  
  <p>The result in fullscreen is fine but when I decrease browser window width the input field on the right goes outside of the container.</p>
  
  <p>Images attached with the exposed behaviour.</p>
  
  <p><a href="https://i.stack.imgur.com/lfQqZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lfQqZ.png" alt="Full screen"></a></p>
  
  <p><a href="https://i.stack.imgur.com/3WZil.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3WZil.png" alt="Resized"></a></p>