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 class='form-group string optional user_name full_name'>
    <label class="string optional control-label" for="user_name">Name</label>
    <div class='controls'>
      <div class='input_group'>
        <select class="select optional form-control group_item title" placeholder="Title" name="user[title]" id="user_title">
          <option value=""></option>
          <option selected="selected" value="Mr">Mr</option>
          <option value="Mrs">Mrs</option>
          <option value="Ms">Ms</option>
          <option value="Miss">Miss</option>
          <option value="Dr">Dr</option>
          <option value="Sir">Sir</option>
          <option value="Other">Other</option>
        </select>
        <input class="string optional form-control group_item" maxlength="255" size="255" type="text" name="user[name]" id="user_name" />
      </div>
    </div>
  </div>

  <div class='form-group string optional user_company'>
    <label class="string optional control-label" for="user_company">Company</label>
    <div class='controls'>
      <input class="string optional form-control" 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

尝试为输入框使用“最小宽度：0”。 Ť 在使用flex的Mozilla中通常会发生这种情况。尝试在输入框中使用“最小宽度：0”。

Answer 2

通过在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。

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

2 个答案: