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

【问题标题】：Make a grid expand to remaining height inside a flex item使网格扩展到弹性项目内的剩余高度
【发布时间】：2018-11-16 20:05:15
【问题描述】：

有很多类似的问题，我都看过了，但没有一个能解决我的问题。

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

目标：
我需要我的网格（及其子项）在这个弹性项目内展开到弹性项目的高度。

问题：
html 包装器只有一个 min-height 100vh 集。这使得网格伸展到弹性项目，而不是它的孩子！

我能找到的唯一解决方案是在 html 包装器上设置 height 100vh，但我不想这样做。有什么方法可以在不设置height的情况下解决我的问题？

在此处查看代码笔： https://codepen.io/mesqueeb/pen/aGeKjm

在此处查看动画 GIF 以向您展示我的意思：

【问题讨论】：

标签： css flexbox grid

【解决方案1】：

你可以试试这个。

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

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>

【讨论】：

【解决方案2】：

不确定它是否能以最好的方式解决您的问题，但这是可行的：

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

【讨论】：

谢谢！也是一个很好的答案，但我决定使用 davecar 的答案，因为当涉及到最初需要祖父母是相对的其他绝对项目时，使网格成为绝对并迫使我使父相对成为我的一些复杂性。（有点难以解释，但有些也与溢出相关等。所以绝对对我设置中的其他元素影响太大。）无论如何谢谢！