Firefox中的Flex项目溢出[重复]答案

【问题标题】：Flex items overflowing in Firefox [duplicate]Firefox中的Flex项目溢出[重复]
【发布时间】：2018-06-27 18:46:32
【问题描述】：

我正在尝试创建一个表单，其中第一行单个文本字段 100% 宽度和第二行 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/

【问题讨论】：

这里有两个问题： (1) 为什么input 元素在Chrome 中会缩小，而在Firefox 中不会？ (2) 为什么弹性项目在某些情况下默认不收缩？请参阅重复的解释。

标签： html css flexbox

【解决方案1】：

您需要设置：

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

jsFiddle

原因是弹性项目默认设置了min-width:auto，对于诸如<input>这样的替换元素，它具有固有尺寸。超过输入框的总宽度时，flex item不会收缩。

你也可以给size属性一个更小的值（文本输入默认是20）来让它更小：

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

参考文献

【讨论】：

我有一种情况，只有将大小设置为任意值才能解决问题。在哪些情况下最小宽度可能不起作用？

【解决方案2】：

我无法告诉你为什么会这样，我猜是浏览器处理 input 元素的方式。

你可以通过...实现布局

添加box-sizing 规则。
将inputs 包装在一个容器中

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

【讨论】：