Why does `justify-content: stretch` require `flex-grow` to make input elements expand

In the following snippet, where I am making response form, where labels are above on mobile, and to left with desktop. The elements with a .field class have justify-content: stretch, which should make the items expand to fit the available space.

However I find that the <input> elements do not expand. I have to add flex-grow: 1 to it in order to make it expand to fill the available width.

This shows I don't understand what stretch is doing. Why is the flex-grow required.

MDN says:

justify-content: stretch; /* Distribute items evenlyStretch 'auto'-sized items to fitthe container */

And you can see below the .input elements have width: auto.

UPDATE: I added the div.not-needed elements below to show a flew child can be a flex parent to and it does not make the difference. This way I separated the two layers of flex parents.

Later on in the MDN link it says:

Note: stretch is not supported by flexible boxes (flexbox).

So the stretch value is only valid for grid for now I think, and not flexbox.

.container {    display: flex;    align-items: stretch;    flex-direction: column;}.label {    width: 100px;}.input {   width: auto;      flex-grow: 1;}.field {    display: flex;    justify-content: stretch;    flex-wrap: wrap;}

<div class="container"><div class="not-needed"><div class="field"><label for="ID_FIELD_1" class="label">Label 1</label><input  id="ID_FIELD_1" class="input" type="text" name="field_1" value="Value 1"></div></div><div class="not-needed"><div class="field"><label for="ID_FIELD_2" class="label">Label 2</label><input  id="ID_FIELD_2" class="input" type="text" name="field_2" value="Value 2"></div></div><div class="not-needed"><div class="field"><label for="ID_FIELD_3" class="label">Label 3</label><input  id="ID_FIELD_3" class="input" type="text" name="field_3" value="Value 3"></div></div></div>