Firefox / display flex / option文本溢出

Question

当使用flex时，select标签的禁用选项文本在Firefox（在Windows和Linux上测试）中溢出：

div {
  display: flex;
}

input {
  width: 100%;
}

<div>
  <input type='text'>
  <select>
    <option value='' disabled selected>something goes here</option>
    <option value='audi'>audi</option>
    <option value='volvo'>volvo</option>
    <option value='bmw'>bmw</option>
  </select>
</div>

https://jsfiddle.net/Lukm1j66/1/

查看缺少文字结尾的图片：

Chrome（和其他Webkit引擎）或IE或Edge没问题。任何的想法？ THX。

Answer 1

您可以利用Flexbox的工作方式，并指示选择使用flex-shrink占用尽可能多的空间。

    div { display: flex; }
    input { width: 100%; }
    select { flex-shrink: 0; }

<div>
    <input type='text'>
    <select>
        <option value='' disabled selected>something goes here</option>
        <option value='audi'>audi</option>
        <option value='volvo'>volvo</option>
        <option value='bmw'>bmw</option>
    </select>
</div>