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

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