CSS / Flexbox Chrome неправильно определяет размер
Может ли кто-нибудь предложить, почему Chrome, похоже, не правильно определяет высоту при использовании следующего упрощенного кода Flexbox?
<div style = "position: absolute; left: 0px; top: 0px; width: 100%; height: 100%">
<div style = "display: flex; flex-direction: column; width: 100%; height: 100%">
<div style = "width: 100%; flex: 1 0 auto; background: red">
<div style = "display: flex; flex-direction: row; width: 100%; height: 100%; background: gray">
<div style = "height: 100%; flex: 1 0 auto">
<div style = "width: 100%; height: 100%; background: orange">
boop
</div>
</div>
</div>
</div>
</div>
</div>Что происходит можно увидеть на изображении: 
Кто-нибудь может придумать исправление? У меня есть небольшая структура, которая использует таблицы внизу для макета. Я, наконец, нахожусь в процессе обновления его для использования Flexbox, но мне кажется, что я не могу заставить вложенные flexbox работать правильно во всех браузерах.
Обновлено: Итак, если я добавлю еще один div "boop" в качестве дочернего элемента к контейнеру flexbox, я хочу следующее (из firefox и IE).
Если я установил высоту на 100%, тогда он завинтил высоту для других родственных div.
Проблема в том, что я хочу, чтобы элементы во втором div складывались друг под другом, и если мы установим высоту: 100% для любого из div внутри второго div, тогда они не будут правильно разделять оставшееся пространство. К сожалению, ни одно из этих предложений не подходит для этого.
Я считаю, что Только Chrome правильно вычисляет высоту. Первый div установлен на 100% высоты своего родителя. Но его родитель - body, и он содержит только одно слово (boop), поэтому его высота - одно слово. Меня больше удивляет то, что другие браузеры заполняют всю страницу без видимой причины.
Справедливо. Итак, как мне заставить стандартный браузер заполнять родительское пространство? (Я добавляю несколько изображений, чтобы помочь пояснить).
Уф, так сбит с толку. Я думал, что понимаю это, ха-ха. Итак, если я установлю базис на 0 для красного div (т.е. flex: 1 0 0) ... он будет работать так же, как firefox и IE. Есть идеи, почему это так?
Два небольших изменения, и он работает во всех браузерах: jsfiddle.net/ds3ujxzd
Проблема объяснена в обмане. Я использовал Решение № 4 из принятого ответа.
Большое спасибо, но мы еще не совсем там. Я изменил вашу скрипку: jsfiddle.net/g79t6vey Можно ли, чтобы оранжевый цвет заполнился серым. а также имел оба блока друг под другом?
В настоящее время в моей скрипке: замена строки 33 на: "flex: 1 0 0px;" исправляет это в Chrome. Я просто пытаюсь выяснить, почему: S В настоящее время: я думаю, что столкнулся с этим: github.com/philipwalton/flexbugs/issues/197 И такое же решение, похоже, работает для меня.
Да. Вместо flex: 1 0 auto используйте flex: 1 0 0px (такой же, как flex: 1) jsfiddle.net/g79t6vey/2
Также не забудьте добавить @username в свои комментарии, иначе пользователь не получит уведомление о том, что вы разместили сообщение. Я случайно наткнулся на твой пост.
@Michael_B Большое спасибо. Хотя я все еще вижу несколько проблем. Использование базиса 0 пикселей имеет довольно плохой побочный эффект в том смысле, что, когда размер окна становится меньше, чем содержимое, происходит очень странное перекрытие, поэтому я не считаю, что это правильное решение для этого. Я собрал реальный jfiddle, чтобы продемонстрировать общую проблему. jsfiddle.net/uhgu6w53 Я надеюсь, что это не слишком много, чтобы спросить, но можете ли вы поиграть с этим, чтобы увидеть, что вы сделаете, чтобы убедиться, что (то есть оранжевое поле) правильно расширяется при вложении сложными способами
Упс, забыл упомянуть. Пример jfiddle (jsfiddle.net/uhgu6w53) подходит для других браузеров. Просто Chrome, похоже, не изменяет размер оранжевого div и вместо этого возвращается к высоте содержимого.
Ах, фантастика! Спасибо!. Хотя ваши изменения очень интересны. Я думал, что display: flex нужен только в том случае, если вы собираетесь поместить непосредственных потомков в div, у которого есть flex: x или какое-либо другое свойство, связанное с flex. Кроме того, почему мы хотим удалить высоту: 100% из гибкой строки, но не из гибкой колонки?
height: 100% в контейнере направления строк отменяет настройку по умолчанию align-items: stretch, которая может работать только в том случае, если высота дочернего элемента вычисляется как auto. Более полное объяснение здесь: stackoverflow.com/q/44878379/3597276
удалите
flex-direction: column;из второго div ИЛИ добавьтеheight:100%в третий