如何在带有flex grow 1父级的块div内创建div 100%高度

Question

我搜索并尝试了很多解决方案，但没有一个适用于我的案例。我设置了body和main都不应该更改的设置。在它们里面，我可以添加任意数量的div并更改任何样式。

<div class="body">
<div class="main">
<div class="should-be-full-height">
Content
</div>
</div>
</div>

.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
}

https://jsfiddle.net/eqwu3yfh/

我添加了背景色和边框，只是为了更好地了解发生了什么。我需要具有.should-be-full-height类的div使用其父级(.main(的100%高度。我怎样才能做到这一点？

谢谢。很抱歉，如果有人问我这个问题，我找不到答案。

Answer 1

您可以从主体中移除flex-direction: column，也可以使用height:100%

.body {
display: flex;
/* flex-direction: column;*/
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: block;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
height: 100%;
}

<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>

或者您将main的显示更改为flex并使用width: 100%

.body {
display: flex;
flex-direction: column;
min-height: 100vh;
height: auto;
width: 100%;
background-color: #CCC;
border: 1px solid black;
}
.main {
height: auto;
flex-grow: 1;
display: flex;
background-color: red;
border: 1px solid white;
}
.should-be-full-height {
background-color: grey;
border: 1px solid black;
width: 100%;
}

<div class="body">
<div class="main">
<div class="should-be-full-height">
Hi
</div>
</div>
</div>

我知道你说过你不能改变身体和主体，但我看不到其他解决方案。