Почему ширина поля ввода увеличивается с количеством входов (flexbox)?

Question

Я реализую форму, которая имеет несколько разделов с различным количеством полей ввода.При использовании display: flex в родительском div и ширине 100% в полях ввода, я получаю различные значения ширины в зависимости от количества полей ввода внутри формы.

При использовании display: block все работает какпредназначен.

<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 с примером

Это нормальное поведение flexbox?Я что-то пропустил?Спасибо за любую помощь!

Answer 1

Просто удалите width:100%, и вы лучше поймете:

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>

Входы определяют ширину синей рамки, а затем эта ширина будет ссылкой на width: 100%;, делая все входные данные равными полной ширинеit.

---

По существу, процентное значение нуждается в ссылке, поэтому сначала вычисляется ширина синего поля с учетом содержимого, а затем входные данные будут использовать эту ширину в качестве ссылки.

Этоможет также случиться с простыми элементами inline-block

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>

Подробнее о размерах в процентах здесь: https://www.w3.org/TR/css-sizing-3/#percentage-sizing

Вы можете найти явный пример такого поведения:

Например, в следующей разметке:

<article style="width: min-content">
  <aside style="width: 50%;">
  LOOOOOOOOOOOOOOOOOOOONG
  </aside>
</article>

При расчете ширины внешней <article> внутренняя <aside> ведет себя как width: auto, поэтому<article> устанавливает ширину длинного слова.Так как ширина <article> не зависела от «реального» макета, тем не менее, она обрабатывается как определенная для разрешения <aside>, ширина которого равна половине ширины <article>.

---

При использовании display: block все работает как положено.

Просто потому, что вычисление ширины элемента блока отличается и не зависит от содержимого в отличие от inline-блочные элементы или гибкие элементы, содержимое которых определяет ширину

Answer 2

С display: block в основных контейнерах (div), элемент form & ndash; дитя div - автоматически занимает 100% ширины своего родителя.

При display: flex в основных контейнерах элемент form по умолчанию равен flex-basis: auto, что является шириной его содержимого.

Так что, если вы хотите получить то же поведение с display: flex, добавьте flex: 1 0 0 (он же flex: 1) к элементам form. Это говорит им, чтобы они брали всю ширину своих родителей, как 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>

Answer 3

Вы устанавливаете display: flex свойство CSS на неправильном элементе, Вам нужно установить его в форме вместо div, Когда вы устанавливаете display: flex в форме div, они становятся элементом flex, а не входными данными, поэтому ни один из элементов flex-Поведение элемента переходит к полям ввода.

При использовании следующего CSS он будет работать нормально

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

Подробнее см. Руководство по Flex