Firefox / дисплей flex / переполнение текста опций

Question

Текст отключенной опции тега select безобразно переполняется в Firefox (протестировано в Windows и Linux) при использовании flex следующим образом:

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>