Некорректное отображение свойства flex в Chrome или что-то другое?

Question

[HotBrunette]

Стоит задание сделать универсальный контейнер, который будет занимать всю высоту родительского блока. С хидером, футером и боди, которое будет занимать все пространство между хидером и футером. Выбрала для себя flexbox. Все идеально, кроме как в Хроме.
Для скринов специально увеличила flex: 1 для хидела и футера блока, и flex:2 для боди
Как выглядит в фаерфоксе


а так ведется себя этот блок в Хроме

Внутреннее содержимое боди тоже должно быть на всю высоту боди. Подскажите как пофиксить

Answer 1

[Павел Радьков]

По скриншотам трудно гадать, может дело в таблице, которая, скорее всего, генерится скриптом.

Вот пример рабочего лэйаута c фиксированными хеадером и футером и прокруткой посередине codepen.io/paulradzkov/pen/mPwyYO?editors=1100

Общая рекомендация: не использовать короткую запись «flex: 1», т.к. в разных браузерах есть разночтения по поводу. Лучше указывать явно «flex-grow: 1».
Про этот и другие баги флексов можно почитать тут https://github.com/philipwalton/flexbugs

Comments

[HotBrunette]

Возможно, что проблема в таблице, которая действительно генерится скриптом.
Она занимает 100% высоты родительского блока (allpage--body) . А родительский блок у нее, соответственно, тот блок флекса, который должен растягиваться, но у него явная величина не задана. Тогда я задаю ему сама высоту 100%, но он принимает эти 100% от блока-родителя (allpage), который контейнер, т.е. без вычета высоты хидера и футера.
Я тут на вашем примере смоделировала ту ситуацию, которая у меня сложилась codepen.io/zologina/pen/zqzvXR?editors=1100
Синий блок (.h100) должен занимать 100% от высоты .allpage--body и при этом сам иметь значение 100% для того, чтоб вложенная в него таблица работала.
Подскажите как так сделать? Или как узнать фактические размеры .allpage--body чтоб задать их для .h100 в пикселях?

[Павел Радьков]

Через calc(100vh - высота хедера - высота футера).
codepen.io/paulradzkov/pen/jqwWGG?editors=1100

Я на .allpage-body задал height: calc(100vh - 58px - 58px);

Answer 2

[HotBrunette]

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