Как я могу получить поведение FF 33.x Flexbox в FF 34.x?

Question

Мы интенсивно используем flexbox для настольных приложений, таких как веб-приложение, и это отлично работает.

Но в последней версии Firefox Developer Edition (35.0a2) макет работает не так, как ожидалось (он выходит за пределы области просмотра): http://tinyurl.com/k6a8jde

Это отлично работает в Firefox 33.1.

Я бы предположил, что это как-то связано с изменениями в flexbox, описанными здесь: https://developer.mozilla.org/en-US/Firefox/Releases/34/Site_Compatibility

Но, к сожалению, я пока не могу найти способ получить поведение FF 33.x в FF 34 или 35.x.

Любая помощь относительно расположения или как лучше изолировать проблему приветствуется.

Answer 1

Существенным отличием является "подразумеваемый минимальный размер гибких элементов", новая функция в спецификации flexbox. (или, скорее, функция, которая была удалена и повторно введена)

Самый простой (самый грубый) способ восстановить старое поведение - добавить это правило стиля: * { min-height:0 } (или же min-width, если вы были обеспокоены переполнением в горизонтальном flexbox; но похоже, что у вашего тестового примера есть проблемы только с переполнением из вертикального гибкого контейнера).

Обновленная скрипка, с этим изменением: http://jsfiddle.net/yoL2otcr/1/

На самом деле, вам нужно только установить min-height:0 на конкретных элементах - в частности, он нужен для каждого элемента, который:

1. является потомком гибкого контейнера, ориентированного на столбцы

2. имеет высокий потомок, который вы хотите разрешить переполнению (что, возможно, будет корректно обработано промежуточным элементом с "overflow:scroll", как здесь)

(В вашем случае, на самом деле, есть вложенная куча этих элементов, так как у вас есть один высокий элемент внутри многих вложенных гибких контейнеров. min-height:0 все пути вверх, к сожалению.)

(Если вам интересно, эта ошибка содержит больше информации и больше примеров контента, который был поврежден в сети из-за этого изменения спецификации: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520)

Answer 2

It is more simple than that Just give the flex children

.flex-child {
  flex: 1;
  overflow: hidden;
}

without using min-width: 0 hack

Answer 3

Ни одно из этих исправлений не сработало для меня, хотя они и работают. В моем случае я поставлял display: table-cell отступление, которое, казалось, вступало во владение. Используя SASS, в том числе и так, запасной вариант работает для IE, не влияя на FF:

flex: auto; // or whatever   
.ie & {
  display: table-cell;
}