The flexbox footer div does not display - css

Question

I'm trying to make a design with Flexbox.
I'm trying to make a 5 row design.
Google Chrome desktop version is fine. (79.0.3945.88 (64 bit))
Mobile:
Firefox for Android 68.3.0 also works correctly.
But:
(#Menubar, #statusbar) does not appear in Mobile Google Chrome 79.0.3945.79 for Android Iframe takes up all the space. But if I scroll down, I can see.
My Css and Html Code
HTML
<div id="page">
<div id="titlebar">
<span>Title Bar</span>
<i class="fas fa-camera fa-xs"></i>
<i class="fas fa-camera fa-sm"></i>
<i class="fas fa-camera" id='filter' #click="isGizle = !isGizle"></i>
</div>
<div id="filterbar" :class="{gizle:isGizle}">
Filtre Bar
</div>
<div id="toolbar">Tool Bar</div>
<iframe id='content' class="FrameKalem" src="https://www.tcmb.gov.tr">FrameKalem</iframe>
<div id="menubar">Menü Bar</div>
<div id="statusbar">
<span>Status Bar</span>
<i class='fa fa-list' aria-hidden='true'></i>
</div>
</div>
CSS
html,
body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
}
#page {
display: flex;
flex-direction: column;
height: 100vh;
justify-content: baseline;
}
#titlebar {
background-color: #2ecc71;
height: 1rem;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#filterbar {
background-color: khaki;
min-height: 3rem;
}
#toolbar {
background-color: #3498db;
height: 2rem;
}
#content {
flex-grow: 1;
border: 0px;
min-height: 1rem;
}
#menubar {
background-color: darkorange;
height: 2rem;
}
#statusbar {
background-color: hotpink;
height: 1rem;
}