CSS Grid row that expands in height only when necessary? - html

Question

I'm trying to create a CSS grid with two rows. I want the row on the bottom to be fixed to 47px tall. That's easy enough. It's the top row that is giving me trouble.
I want the top row of my CSS grid to be a minimum of 250px tall, even if there is no content in the row. But if content is in there, I want the row to expand its height up to a maximum of 303px tall. That is to say, I want the row's height to grow only if the content makes that necessary.
From what I've seen with things like grid-template-rows: minmax(250px, 303px), is that it will expand to 303px if there is enough room for it to do so.
Even if there is enough room, I don't want it to expand unless it has to - that is to say, it only expands because there's content that is taller than 250px.
I have a simple grid like this:
<div class="myGrid">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
With CSS like this:
.myGrid {
display: grid;
max-height: 350px;
grid-template-rows: minmax(250px, 303px) 47px;
grid-template-columns: 1fr 2.5fr;
grid-template-areas: "a b" "c c";
}
.left {
grid-area: a;
}
.right {
grid-area: b;
}
.bottom {
grid-area: c;
}
With this code, the top row is always 303px, presumably because there's enough room to expand to that height. But I only want it to expand to that height if its content makes that necessary.

Answer 1

Instead of controlling the minimum and maximum heights of the row at the grid container level, control them at the grid item level.
.myGrid {
display: grid;
max-height: 350px;
grid-template-rows: auto 47px;
grid-template-columns: 1fr 2.5fr;
grid-template-areas: "a b" "c c";
}
.left {
min-height: 250px;
max-height: 303px;
grid-area: a;
background-color: aqua;
}
.right {
min-height: 250px;
max-height: 303px;
grid-area: b;
background-color: lightgreen;
}
.bottom {
grid-area: c;
background-color: orangered;
}
body {
margin: 0;
}
<div class="myGrid">
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
jsFiddle demo

Answer 2

A hack can be to set the max-height on either .left or .right, and overflow as hidden like:
.myGrid {
display: grid;
max-height: 350px;
max-width: 700px;
grid-template-rows: minmax(250px, max-content) 47px;
grid-template-columns: 33% 67%;
grid-template-areas: "a b" "c c";
}
.left {
max-height: 303px;
overflow: hidden;
grid-area: a;
}
.right {
grid-area: b;
}
.bottom {
grid-area: c;
}