Div с 100% высотой переполнения корпуса в Chrome

Я пытаюсь сделать 100% -ный гибкий ребенок, как описано здесь и здесь. В firefox и IE это проявлялось так, как ожидалось, но в chrome это испортилось. Дивы выходят из тела. Это еще один побочный эффект хрома после спецификации тройника или еще ошибка?

Код:

<!DOCTYPE html>
<html>
<head>
<style>
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    div {
        border: 1px solid black;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .red-border {
        border: 2px solid red;
    }

    .blue-border {
        border: 2px solid blue;
    }

    .green-border {
        border: 2px solid green;
    }
</style>
</head>
<body class="red-border" >
<div clsas="blue-border" style="display: flex; flex-direction: column; width: 100%; height: 100%;">
    <div  style="flex: 0 1 auto; ">top</content></div>

    <div class="green-border"  style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >
        <div style="flex: 0 1 auto; ">left</div>
        <div style="flex: 1 1 auto; width: 100%; height: 100%;">
            <div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>
        </div>
        <div style="flex: 0 1 auto; ">right</div>
    </div>

    <div style="flex: 0 1 auto; ">bottom</content></div>
</div>
</body>
</html>

plnkr: http://run.plnkr.co/plunks/wi5MQYK5yEdzdgQBaUWh/

что он выглядит в ff и ie (11): вот как он выглядит в ff

что он выглядит в chome: вот как он выглядит в chome

UPDATE: "center" div должен быть не-flex div и должен иметь 100% высоту. Причина заключается в том, чтобы иметь не-flex div, что моя реальная структура сайта довольно сложная - она ​​использует много веб-компонентов, а некоторые из них просто не могут использовать flex. Поэтому в какой-то момент я должен прекратить использовать flex и иметь "нормальный" div, чтобы иметь высоту 100%.

Ответы

Ответ 1

Проблема, похоже, связана с тем, что вы комбинируете свойства height и flex-basis в одном блоке объявлений. Кажется, это создает конфликт. В моем ответе ниже я удалил высоты и использовал flex-basis. Вы также заметите пару других настроек.

Изменение:

(1)

<div class="green-border" style="flex: 1 1 auto; display: flex; flex-direction: row; width: 100%; height: 100%;" >

К

<div class="green-border" style="flex: 1 1 100%; display: flex; flex-direction: row; width: 100%;" >

примечания: удалено height; вместо этого используется flex-basis;

(2)

<div style="flex: 1 1 auto; width: 100%; height: 100%;">

К

<div style="flex: 1 1 100%; width: 100%; display: flex;">

примечания: удалено height; вместо этого использовался flex-basis; установленный вложенный гибкий контейнер;

(3)

<div style="background-color: #ff6500; width: 100%; height: 100%;">center</div>

К

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>

примечания: удалено height; вместо этого использовался flex-basis; добавлено свойство flex;

Наконец, синяя рамка не показывалась из-за опечатки.

(4)

clsas="blue-border"

К

class="blue-border"

С настройками выше, макет отобразится в Chrome следующим образом:

введите описание изображения здесь

Все ящики лежат внутри их контейнеров.

DEMO

Применение высоты 100% к вложенным, негибким элементам

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

html, body { height: 100%; }

Я объяснил причину этого здесь:

Но внимательно посмотрите на спецификация показывает исключение:

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

Обратите внимание на часть:... и элемент не совсем расположен.

Следовательно, попробуйте это в поле "center":

Изменение:

(5)

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%;">center</div>

К

<div style="background-color: #ff6500; width: 100%; flex: 1 1 100%; position: relative;">
    <div style="border: 5px solid yellow; position: absolute; height: 100%; width: 100%;">
       center</div>
</div>

Примечания:

  • добавлен position: relative, чтобы установить ближайшего позиционного предка для абсолютного позиционирования
  • создан новый, вложенный, негибкий div контейнер
  • применяется абсолютное позиционирование к новому div с помощью height: 100%.

При абсолютном позиционировании вам не нужно применять процентные высоты к родительским контейнерам.

DEMO

Ответ 2

Проблема заключается в том, что ваша граница делает div более 100%, заставляя его выскакивать. Попробуйте сделать вашего ребенка div менее 100%, например, 99%. Это должно решить вашу проблему.