Ширина встроенного гибкого контейнера не увеличивается

Question

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

<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;
}

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

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

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

Благодарю.

Answer 1

Из этого так ответьте:

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

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

Так что ваши 100px гибкий базис из 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>

Вы могли бы использовать flex вместо inline-flex, но тогда ваш div будет отображаться как элемент блока, т.е. он будет занимать всю доступную ширину, а не ограничиваться вашим контентом.

Я полагаю, вы используете inline-flex так что фон остается ограниченным содержанием.

Answer 2

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