输入控件在Firefox中溢出了Flex容器

Question

我在使用flexbox输入组的Firefox（Chrome上不错）上遇到了问题-select输入将文本输入推出了容器。

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

.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”作为输入框。T 这通常发生在 Mozilla 中使用 flex 时。尝试使用“min-width: 0”作为输入框。

Answer 2

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

演示1

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

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

该size="255"是设置其中，取决于浏览器，可以与你在CSS设置的大小冲突控件的大小。通过删除此属性并让CSS管理宽度，该问题似乎已解决：

演示2

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

例如：

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

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

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