Я пытаюсь сделать 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):
что он выглядит в chome:
UPDATE: "center" div должен быть не-flex div и должен иметь 100% высоту. Причина заключается в том, чтобы иметь не-flex div, что моя реальная структура сайта довольно сложная - она использует много веб-компонентов, а некоторые из них просто не могут использовать flex. Поэтому в какой-то момент я должен прекратить использовать flex и иметь "нормальный" div, чтобы иметь высоту 100%.
