Why does input field width grow with number of inputs (flexbox)? - html

Question

I'm implementing a form which has multiple sections with different numbers of input fields. When using display: flex on the parent div and 100% width on the input fields, I get different widths calculated, depending on the number of input fields inside the form.
When using display: block, everything works as intended.
<section>
One input field.
<div>
<form action="">
<input type="text">
</form>
</div>
</section>
<section>
Two input fields.
<div>
<form action="">
<input type="text"> <!-- each input field is double as wide as in the first section! -->
<input type="text">
</form>
</div>
</section>
section {
background: lightgrey;
width: 1100px;
}
div {
background: red;
display: flex;
}
form {
background: blue;
box-sizing: border-box;
}
input {
box-sizing: border-box;
width: 100%;
margin: 0.3125em 0 0.625em;
}
Codepen link with example
Is this supposed to be normal flexbox behavior? Am I missing something?
Thanks for any help!

Answer 1

Simply remove width:100% and you will better understand:
section {
background: lightgrey;
width: 1000px;
}
div {
background: red;
display: flex;
}
form {
background: blue;
box-sizing: border-box;
}
input {
box-sizing: border-box;
margin: 0.3125em 0 0.625em;
}
<section>
One input field.
<div>
<form action="">
<input type="text">
</form>
</div>
</section>
<section>
Two input fields.
<div>
<form action="">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
Three input fields.
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
Four input fields.
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
The inputs are defining the width of the blue box and then this width will be the reference of the width: 100%; making all the input to be full width of it.
Basically, a percentage value need a reference so the width of the blue box is first calculated considering the content and then the input will use that width as reference.
This can also happen with simple inline-block elements
section {
background: lightgrey;
width: 1000px;
}
div {
background: red;
display: inline-block;
}
form {
background: blue;
box-sizing: border-box;
}
input {
box-sizing: border-box;
width:100%;
margin: 0.3125em 0 0.625em;
}
<section>
<div>
<form action="">
<input type="text">
</form>
</div>
</section>
<section>
<div>
<form action="">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
More details about percentage sizing here: https://www.w3.org/TR/css-sizing-3/#percentage-sizing
You can find an explicit example of such behavior:
For example, in the following markup:
<article style="width: min-content">
<aside style="width: 50%;">
LOOOOOOOOOOOOOOOOOOOONG
</aside>
</article>
When calculating the width of the outer <article>, the inner <aside> behaves as width: auto, so the <article> sets itself to the width of the long word. Since the <article>’s width didn’t depend on "real" layout, though, it’s treated as definite for resolving the <aside>, whose width resolves to half that of the <article>.
When using display: block, everything works as intended.
Simply because the width calculation of block element is different and doesn't depend on the content unlike for inline-block elements or flex items where the content define the width

Answer 2

You are setting display: flex CSS property on wrong element, You need to set it on form instead of div,
When you set display: flex on div them form become the flex item not the inputs, Therefore none of the flex-item behaviour comes to input fields.
With following CSS it will work fine
section {
background: lightgrey;
width: 1000px;
}
div {
background: red;
display: flex;
}
form {
background: blue;
display:flex;
box-sizing: border-box;
}
input {
box-sizing: border-box;
width: 100%;
margin: 0.3125em 0 0.625em;
}
For more details refer to Flex tutorial

Answer 3

With display: block on the main containers (div), the form element – the child of the div – automatically occupies 100% width of its parent.
With display: flex on the main containers, the form element defaults to flex-basis: auto, which is the width of its content.
So if you want the same behavior with display: flex, add flex: 1 0 0 (aka flex: 1) to the form elements. This tells them to take full width of their parents, like display: block.
section {
background: lightgrey;
width: 1000px;
}
div {
background: red;
display: flex;
}
form {
flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
background: blue;
box-sizing: border-box;
}
input {
box-sizing: border-box;
width: 100%;
margin: 0.3125em 0 0.625em;
}
<section>
One input field.
<div>
<form action="">
<input type="text">
</form>
</div>
</section>
<section>
Two input fields.
<div>
<form action="">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
Three input fields.
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>
<section>
Four input fields.
<div>
<form action="">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
</section>