<分区>
为了更好地查看问题，请在 firefox 和 chrome 上运行以下 html 代码并查看差异。
该代码适用于所有浏览器，但不适用于 Chrome。问题是当您将显示设置为 flex 并将 flex-direction 设置为 column，并设置其中一个 flex 元素 flex-grow 为 1。此 flex 元素的内容不能将高度设置为 100%。
你能帮我解决不使用 JavaScript 或 css Calc 函数的问题吗？ 因为在实际的元素中事情要比这复杂的多。
h1 {
margin: 0;
padding: 0;
color: white;
}
div {
font-size: 38px;
color: white;
}<body style="margin: 0; padding: 0;">
<div style="height: 100vh; background: royalblue;">
<div style="display: flex; flex-direction: column; height: 100%;">
<div style="background: rosybrown; flex-grow: 0;">
This is first flex item
</div>
<div style="flex-grow: 1; background-color: red;">
<div style="background-color: orange; height: 100%;">
This div is inside flex item that grows to fill the remaining space. and has css height 100% but its not filling its parent.
<br/>this div need to be filling its parent (the red div). this works on all other browsers.
</div>
</div>
</div>
</div>
</body>