В приведенном ниже примере я бы ожидал, что innerContent div будет всей высотой содержимого div, но это не так: ( plunker link )
.shell{
height: 100%;
display: flex;
flex-direction: column;
background-color: green;
}
.content{
background-color: red;
flex-grow: 1;
}
.innerContent{
background-color: blue;
height: 100%;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
<body>
<div class="shell">
<div class="header">
<h1>Hello Plunker!</h1>
</div>
<div class="content">
<div class="innerContent">
Content
</div>
</div>
<div class="footer">
Footer
</div>
</div>
</body>
Ожидаемое поведение состоит в том, что внутреннее содержимое (синее) имеет ту же высоту, что и область содержимого (красное).Для меня я получаю это:
