CSS 网格行仅在必要时扩展高度？

Question

我正在尝试创建一个包含两行的 CSS 网格。我希望底部的行固定为 47px 高。这很容易。最上面一排给我带来了麻烦。

我希望 CSS 网格的顶行高度至少为 250 像素，即使该行中没有内容也是如此。但如果内容在那里，我希望该行将其高度扩展至最大 303 像素高。也就是说，只有当内容需要时，我才希望行高增长。

从我所看到的类似 的情况来看grid-template-rows: minmax(250px, 303px)，如果有足够的空间，它会扩展到 303px。

即使有足够的空间，除非迫不得已，我也不希望它扩展 - 也就是说，它只会因为有高于 250px 的内容而扩展。

我有一个像这样的简单网格：

<div class="myGrid">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
</div>

使用这样的CSS：

.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;
}

使用此代码，顶行始终为 303px，大概是因为有足够的空间扩展到该高度。但我只希望它能够扩展到那个高度，如果它的内容有必要的话。

Answer 1

一个技巧可以是在 .left 或 .right 上设置最大高度，并将溢出设置为隐藏，如下所示：

.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;
}