input / button elements not shrinking in a flex container

I needed to wrap the input element with a styled element and than set the input width and min-width as below:

.field__input input {
    width: 0;
    min-width: 100%;
}

An input element, unlike a div, comes with a default width.

Here's a simple illustration of this setting:

The browser automatically gives the input a width.

input {
  border: 1px solid blue;
  display: inline;
}

div {
  border: 1px solid red;
  display: inline;
}

<form>
  <input>
  <br><br>
  <div></div>
</form>

Also, an initial setting on flex items is min-width: auto. This means that items cannot shrink below their width on the main axis.

Hence, input elements cannot shrink below their default width and may be forced to overflow the flex container.

You can override this behavior by setting your inputs to min-width: 0 (revised codepen)

Here's a full explanation: Why don't flex items shrink past content size?

In some cases, you may need to override input widths using width: 100% or width: 0.

I would like to extend @Michael Benjamin solution

In some cases, you may need to override input widths using width: 100% or width: 0.

you can also do calc(100%)