Firefox 中的输入控件溢出 flex 容器

Question

我在使用 flexbox 输入组的 Firefox（Chrome 中很好）上遇到问题 - 选择输入将文本输入推出容器。

我提取了一些标记并复制了下面的相关样式：

.column.names {
  width: 48%;
  float: left;
}
select {
  min-width: 6em;
  align-items: center;
  justify-content: center;
  width: 7em;
}
input {
  width: 100%;
}
.input_group {
  display: flex;
}

<div class='column names'>

  <div>
    <label for="user_name">Name</label>
    <div>
      <div class='input_group'>
        <select name="user[title]" id="user_title">
          <option value=""></option>
          <option selected="selected" value="Mr">Mr</option>
          <option value="Mrs">Mrs</option>
          <option value="Other">Other</option>
        </select>
        <input maxlength="255" size="255" type="text" name="user[name]" id="user_name" />
      </div>
    </div>
  </div>

  <div>
    <label for="user_company">Company</label>
    <div>
      <input maxlength="255" size="255" type="text" value="" name="user[company]" id="user_company" />
    </div>
  </div>

</div>

https://jsfiddle.net/j9s0fk8c/

为了澄清，名称选择+输入框的组合应该与公司输入框的宽度相同。

再一次，这在 Chrome 中一直很好，但由于某种原因，flexbox 让我们在 Firefox 中没有尽头（这只是我们不得不处理的一系列奇怪问题中的一个）

Answer 1

尝试对输入框使用“min-width: 0”。吨 这通常在 Mozilla 中使用 flex 时发生。尝试使用“min-width: 0”作为输入框。

Answer 2

通过在 flex 容器周围添加边框，可以在 Firefox 中看到问题：

DEMO 1

看来溢出的主要原因是input 元素中的size 属性。

<input class="string optional form-control group_item" maxlength="255" size="255"
      type="text" name="user[name]" id="user_name" />

size="255" 正在设置控件的大小，根据浏览器的不同，它可能与您在 CSS 中设置的大小发生冲突。通过移除这个属性并让 CSS 管理宽度，问题似乎得到了解决：

DEMO 2

注意size 属性仅控制input 的大小。它不会影响您可以输入的字符数，这由maxlength 属性（也存在于您的代码中）控制。

例如：

<input type="text" size="5" maxlength="20" >

在上面的代码中，控件的宽度为 5 个字符（除非被 CSS 覆盖），但最多可以接受 20 个字符。

有关size 和maxlength 属性的更多详细信息，请参见：MDN <input> definition。