为何`justify-content: stretch`需配合`flex-grow`才能让input元素拉伸？

我制作了一个响应式表单：移动端标签位于输入框上方，桌面端标签位于输入框左侧。给带有.field类的元素设置了justify-content: stretch，理论上应该让子元素拉伸以填充可用空间，但实际发现<input>元素并未拉伸，必须为其添加flex-grow: 1才能使其填充可用宽度。这说明我并未理解stretch的作用，为何需要flex-grow？

MDN文档指出：

justify-content: stretch; /* 均匀分布项目
拉伸自动尺寸的项目以适应容器 */

我的.input元素width设置为auto。

更新说明：我添加了div.not-needed元素，用于展示flex子元素同时作为flex父元素不会产生影响，以此分隔两层flex父容器。

MDN文档后续还提到：

注意：flexbox（弹性盒模型）不支持stretch值。

因此我认为目前stretch值仅对grid布局有效，对flexbox无效。

代码示例 #

CSS代码

.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;
}

HTML代码

<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>

内容的提问来源于stack exchange，提问作者run_the_race