Ширина встроенного гибкого контейнера не растет

Рассмотрим следующий макет:

<div class="div">
  <span class="span1">test</span>
  <span class="span2">test test test test test</span>
</div>

и css:

.div{
   display:inline-flex;
   background-color:lightgray;
}
.span1{
   flex:0 0 100px;
}
.span2{
   white-space:nowrap;
}

Почему не растягивается, чтобы покрыть два пролета? Это происходит в FF и Chrome. В IE 11/Edge он работает (как я ожидаю, он будет работать) Здесь скрипка https://jsfiddle.net/p18h0jxt/

PS: Он работает везде, если я использовал следующий стиль:

.span1{
   flex:0 0 auto;
   width:100px;
}

Спасибо.

Ответы

Ответ 1

От этот ответ SO <:

Ошибка, затрагивающая все основные браузеры, кроме IE 11 и Edge:

Как вы сказали - видимо flex-basis не соблюдается во вложенном контейнере flex.

Таким образом, ваш 100px flex-basis из flex: 0 0 100px; не может работать должным образом (за исключением, как это ни парадоксально, в IE 11 и Edge).

Обходной путь (также упоминаемый здесь) заключается в использовании width вместо flex-basis следующим образом:

.div {
  display: inline-flex;
  background-color: lightgray;
}

.span1 {
  width: 100px;
}

.span2 {
  white-space: nowrap;
}
<div class="div">
  <span class="span1">test</span>
  <span class="span2">test test test test test</span>
</div>

Ответ 2

100px, о котором вы говорите в своем текущем примере, относится к flex-basis не к ширине элемента.