Блог

Взгляните на этот 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.

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

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

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

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

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

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

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