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

Answer 1

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