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

Мы используем 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.

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

Ответ 1

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

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

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

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

- это дочерний элемент контейнера с гибким контуром столбца
имеет высокий потомок, который вы хотите разрешить переполнению (которое, возможно, будет обработано изящно промежуточным элементом с "переполнением: прокруткой", как это имеет место здесь)

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

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

Ответ 2

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

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

Ответ 3

Это проще, чем просто дать детям гибкие

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

без использования min-width: 0 взломать