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

run_the_race 0
Viewed 34

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 evenly Stretch 'auto'-sized items to fit the 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>

flexbox css
1 Answers

The justify-content property has to be applied to flex containers and not to it's items.
Even then it just defines how the space between and around content items is distributed (see CSS justify-content).

For filling the available space, the item element (your input) has to grow (e.g. flex-grow: 1) or it's width to be set (e.g. width: 100%).

mladoi0
Related