Flex items overflowing in Firefox [duplicate]

Question

I'm trying to create a form with first row a single text field 100% width and 2nd row 3 fields equidistant. It works fine on Chrome. However it's overflowing on FireFox.

.form {
  display: flex;
  flex-direction: column;
  width: 300px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.form input {
  width: 100%;
  padding: 20px;
}

.form .number {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form .expiry {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

<div class="form">
  <div class="number">
    <input data-stripe="number" placeholder="Credit Card Number" class="" type="text">
  </div>
  <div class="expiry">
    <input data-stripe="exp-month" placeholder="MM" class="" type="text">
    <input data-stripe="exp-year" placeholder="YY" class="" type="text">
    <input data-stripe="cvc" placeholder="CVC" class="" type="text">
  </div>
</div>

https://jsfiddle.net/xhr031yr/2/

Answer 1

You will need to set:

.form .expiry input {
  min-width: 0;
}

jsFiddle

The reason is flex items have min-width:auto set by default, and for a replaced element such as <input>, it has intrinsic dimensions. The flex item won't shrink when the total width of the input boxes exceeded.

You can also give the size attribute a smaller value (default is 20 for text input) to make it smaller:

<input type="text" size="3">

References

• Automatic Minimum Size of Flex Items
• Replaced elements
• HTML <input> attribute size

Answer 2

I can't tell you why that's happening, my guess is the way the browser handles the input element.

You can achieve the layout by...

1. Add the box-sizing rule.

2. Wrapping the inputs in a container

fiddle

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.form {
  display: flex;
  flex-direction: column;
  width: 300px;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

.form input {
  width: 100%;
  padding: 20px;
}

.form .number {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.form .expiry {
  display: flex;
  width: 100%;
  justify-content: space-between;
}

<div class="form">
  <div class="number">
    <input data-stripe="number" placeholder="Credit Card Number" class="" type="text">
  </div>
  <div class="expiry">
    <div class="input">
      <input data-stripe="exp-month" placeholder="MM" class="" type="text">
    </div>
    <div class="input">
      <input data-stripe="exp-year" placeholder="YY" class="" type="text">
    </div>
    <div class="input">
      <input data-stripe="cvc" placeholder="CVC" class="" type="text">
    </div>
  </div>
</div>
<!---->