Flex项目在Firefox中溢出 [英] Flex items overflowing in Firefox

问题描述

我正在尝试创建一个表单，其中第一行的单个文本字段的宽度为100％，第二行的三个字段等距.它在Chrome上运行良好.但是，它在FireFox上溢出.

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/

推荐答案

您将需要设置:

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

jsFiddle

jsFiddle

原因是弹性项目默认情况下设置为min-width:auto，对于诸如<input>之类的替换元素，它具有固有尺寸.输入框的总宽度超过时，flex项将不会收缩.

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.

您还可以赋予size属性较小的值(对于文本输入，默认值为20)以使其较小:

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

参考

• 弹性商品的自动最小尺寸
• 已替换的元素
• HTML <input>属性size

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

这篇关于Flex项目在Firefox中溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！