input / button elements not shrinking in a flex container

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.