[Fixed] Adapt the Angular Material input field to screen width

Issue

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:

<div class="grid">

  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="Title">
  </mat-form-field>

</div>

And this CSS:

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 2em;
}

The result in fullscreen is fine but when I decrease browser window width the input field on the right goes outside of the container.

Images attached with the exposed behaviour.

Solution

Did you try to add a width: 100% to the mat-form-field?

If it’s not working, try to use angular flex layout to use css flexbox in your angular projet.