Как я могу получить поведение FF 33.x Flexbox в FF 34.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 взломать