Flex中的Flex项目溢出

Question

我正在尝试创建一个第一行的表单,单个文本字段100%宽度和第2行3个字段等距.它适用于Chrome.然而,它在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

你需要设置:

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

的jsfiddle

原因是min-width:auto默认情况下设置了flex项,对于替换元素,例如<input>,它具有内在尺寸.当超过输入框的总宽度时,flex项不会缩小.

您还可以为该size属性指定一个较小的值(文本输入的默认值为20)以使其更小:

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

参考

• Flex项的自动最小尺寸
• 替换元素
• HTML <input>属性size