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

原因是Flex项目默认设置为min-width:auto，对于替换元素（如<input>），它具有内在尺寸。当超过输入框的总宽度时，弹性项目不会收缩。

您还可以为size属性指定一个较小的值（文本输入默认为20）以使其变小：

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

<强>参考

Answer 2

我无法告诉你为什么会发生这种情况，我的猜测是浏览器处理input元素的方式。

您可以通过...来实现布局。

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

fiddle

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Flex中的Flex项目溢出

2 个答案: