When using flex-direction: row; on the body element, I expect that setting align-items: stretch; will vertically stretch the child item to fill the screen height. However, for some reason this is not happening.
Below is a simple example of what I am trying to achieve. My expectation is for the blue block to completely fill the green body.
body {
display: flex;
flex-direction: row;
align-items: stretch;
align-content: stretch;
background-color: green;
}
.flexContainer {
display: flex;
background-color: blue;
}
<body>
<div class="flexContainer">
Hello
</div>
</body>