Flex items overflowing in Firefox

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/

There are two problem areas here: (1) Why do the `input` elements shrink in Chrome but not Firefox? and (2) Why do flex items in some cases not shrink by default? See the duplicates for the explanations. — Michael Benjamin, Jan 18 '18 at 17:58

Stickers · Accepted Answer · 2018-01-20T15:25:32.620

15

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

edited Jan 20 '18 at 15:25

answered Jan 18 '18 at 17:09

Stickers

75,527
23
147
186

I have a situation where only setting the size to an arbitrary value fixed the problem. In which situations the min-width may not work? – Danielo515 Jun 02 '20 at 17:03

score 1 · Answer 2 · answered Jan 18 '18 at 16:22

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...

Add the box-sizing rule.
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>
<!---->

Flex items overflowing in Firefox

2 Answers2

Linked