Firefox и Flexbox - при использовании белого пространства: Nowrap на детском элементе гибкая коробка разбивает

Question

Взгляните на этот jsfiddle в сафари или хром, затем в 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 дивизион

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

Answer 1

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

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

Answer 2

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

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

Answer 3

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

http://lists.w3.org/archives/public/www-style/2011jan/0201.html