In the example below, .grid-container has grid-template-rows: 1fr set, but the row does not grow, even though there is plenty of extra room. It seems to behave like grid-template-rows: auto. Any ideas as to what's going on here? As a sidenote, this is a contrived demo for practice, there are better ways to lay this out, but I'm curious about why it doesn't work like I expect. Thanks for any help!
Update - Appears to work as expected in Firefox and Safari, but not Chrome.
.flex-container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.grid-container {
flex-grow: 1;
background-color: orange;
display: grid;
grid-template-rows: 1fr;
place-items: center;
}
.grid-item {
padding: 1.5em;
background-color: rgba(0,0,0,.3);
}
nav {
display: flex;
padding: 1em;
justify-content: space-around;
}
body {
margin: 0;
}<div class="flex-container">
<nav>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</nav>
<div class="grid-container">
<div class="grid-item">Grid Item</div>
</div>
</div>