Firefox и flexbox - при использовании пробела: теперь оборачивайте дочерний элемент, гибкое поле разрывается

Question

Посмотрите на этот jsFiddle в Safari или Chrome, затем в Firefox: http://jsfiddle.net/brandondurham/LRJhm/

Как это выглядит в Webkit: http://cloud.smallparade.com/B4TE

Как это выглядит в Firefox: http://cloud.smallparade.com/B53R

Вы увидите, что гибкая коробка сломана в Firefox. Длинный из двух блоков (.left) имеет свойство css white-space, установленное на nowrap, потому что, ну, я не хочу, чтобы оно было упаковано Это единственное свойство делает гибкое поле разрыва и расширения, чтобы соответствовать всему содержимому .left div.

Кто-нибудь еще видел такое поведение? Есть исправление?

Answer 1

Хотя я думаю, что принятый Робертцем правильный ответ (именно так должен работать box flex).Вы можете отключить «внутреннюю» ширину, о которой он говорит, явно установив для этой ширины поля значение 0. Таким образом, учитывается только указанное вами распределение ширин.

Это поведение можно объяснить, посколькуЕсли вы установите нулевую ширину всех блоков, то вся ширина станет «оставшейся», поэтому распределение полностью зависит от того, что вы укажете.

Answer 2

Установите width: 0 на элементе, и он станет его "предпочтительной шириной", и заставит неупакованные текстовые элементы внутри элемента вести себя правильно.

http://lists.w3.org/Archives/Public/www-style/2011Jan/0201.html

Answer 3

Вот как это должно работать.Flexbox распределяет оставшееся пространство после того, как внутренняя ширина элементов была вычислена, она не контролирует внутреннюю ширину самих элементов.Вот почему результаты не интуитивны , если вы не устанавливаете явные значения ширины, хотя рабочая группа рассматривает спецификацию.

Мой совет: попробуйте использовать display: table; вместо , хотя вы можете столкнуться с некоторыми похожими проблемами.