I want to have 2 form input fields in one row: 
1. the first has a fixed with,
1. the second should grow and shrink, but this does not shrink below 180px.

Here is a full [stack-blitz example](https://stackblitz.com/edit/flex-layout-angular-material-form-input)

When you start the app, we see this  

[![enter image description here](https://i.stack.imgur.com/asYki.png)](https://i.stack.imgur.com/asYki.png)

There **maybe another issue**:  

I think the 2nd input field should already show the hint text and the horizontal line - but it will only show it when it get's the focus.  

Is this the expected behaviour or am I missing something?

Anyway. The main issue is that the **2nd field does not shrink** as expected. It will not shrink below 180px:  

[![enter image description here](https://i.stack.imgur.com/2092C.png)](https://i.stack.imgur.com/2092C.png)

In the chrome dev-tool I can see that the `input` element is wrapped with a `div class="mat-form-field-infix">` and the class `mat-form-field-infix` has a fixed width of 180px!

The only **workaround** that I came up with is to override this width with using **`::ng-deep`**.  

You can activate this in the [co-input-field.component.scss](https://stackblitz.com/edit/flex-layout-angular-material-form-input?file=app%2Fco-input-field%2Fco-input-field.component.scss) file of the Stackblitz example

```
:host ::ng-deep .mat-form-field-infix {
  // width: auto !important;
  width: unset !important;
}

```

With this workaround the 2nd input shrinks as expected:  

[![enter image description here](https://i.stack.imgur.com/jcjNI.png)](https://i.stack.imgur.com/jcjNI.png)

But [::ng-deep is deprecated](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep) and will be removed.  

So **what is the right way** to make the input shrink as expected?