使网格扩展到弹性项目内的剩余高度

Question

有很多类似的问题，我已经审查了所有这些问题，但没有一个解决了我的问题。

物业：
我有一个带有flex column的flexbox布局，而底部的flex-item填充了页面高度的其余部分。 flex项目被flex 1拉伸到页面的其余部分。

目标：
我需要在这个flex项中的网格（及其子项）扩展到flex项的高度。

问题：
html包装器只有min-height 100vh集。这使得网格延伸到flex项目，但不是它的子项！

我能找到的唯一解决方案是在html包装器上设置height 100vh，但我不想这样做。有没有办法解决我的问题而不设置height？

请参阅此处的codepen： https://codepen.io/mesqueeb/pen/aGeKjm

在这里查看动画GIF，向您展示我的意思：

Answer 1

不确定它是否以最佳方式解决了您的问题，但这有效：

.remaining {
    flex: 1;
   /* display: flex; */
    flex-direction: column;
    position: relative;
}
.grid {
    border: solid #008080 thick;
/* flex: 1; */
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer 2

你可以试试这个。

移除flex-direction: column;中的.remaining，它会扩展高度。

main{
    min-height: calc(100vh - 51px);
    display: flex;
    flex-direction: column;
}
div{
    border: solid goldenrod thick;
    padding: 2px;
    margin: 2px;
}
.full-page{
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}
.top-row{
    height: 100px;
}
.remaining{
    flex: 1;
    display: flex;
}
.grid{
    border: solid teal thick;
    flex: 1;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
}
.key{
    border: thin green solid
}
.small{
    font-size: .8em
}

<main>
    <div class="full-page">
        <div class="top-row">
            grid below will take full height only if body height is set...
        </div>
        <div class="remaining">
            <div class="grid">
                <div class="key">1</div>
                <div class="key">2</div>
                <div class="key">3</div>
                <div class="key">4</div>
                <div class="key">5</div>
                <div class="key">6</div>
                <div class="key">7</div>
                <div class="key">8</div>
                <div class="key">9</div>
                <div class="key">C</div>
                <div class="key">0</div>
                <div class="key">➕</div>
            </div>
        </div>
    </div>
</main>