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

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

DEMO 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 管理宽度，问题似乎已解决:

DEMO 2

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

例如:

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

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

有关 size 的更多详细信息和 maxlength属性可以在这里找到:MDN <input> definition .