Flexbox с пробелами: предварительно

У меня есть контейнер flexbox, который использует форматирование white-space: pre и содержит несколько текстовых узлов, состоящих только из пробелов. Однако, если пробелы не заключены в span, они не отображаются. Почему это происходит и могу ли я заставить его работать без использования дополнительных промежутков?

(кстати, я использую flexbox, чтобы некоторые другие элементы вырастали до полной ширины контейнера)

.container {
  display: flex;
  white-space: pre;
}

.red {
  color: red;
}

.blue {
  color: blue;
}
<div class="container">
<span>    </span><span class="red">foo</span><span>    </span><span class="blue">bar</span>
</div>
<div class="container">
    <span class="red">foo</span>    <span class="blue">bar</span>
</div>

https://jsfiddle.net/6zrm81tk/1/


html css flexbox whitespace
person Radim Vansa    schedule 30.04.2021    source источник
comment
Почему бы вам не использовать &nbsp; для пробелов между тегами span?   -  person NumanAsh    schedule 30.04.2021
comment
Хм, я мог бы сделать это - хотя это сомнительно, лучше ли это, чем обертывание пробелов внутри элемента span. Но на самом деле TBH я использую предварительный перенос (в данном примере это не имеет значения), и если строка окажется слишком длинной, я бы предпочел ее обернуть. Приложение фактически эмулирует терминал, считывая ввод/вывод через веб-сокет, а затем используя ansi_up для преобразования последовательностей ANSI в HTML.   -  person Radim Vansa    schedule 30.04.2021