Увеличьте сетку до оставшейся высоты внутри гибкого элемента.

Question

Есть много похожих вопросов, я рассмотрел все из них, но ни один не решил мою проблему.

Предпосылки:
У меня есть макет flexbox с flex column инижний элемент flex, заполняющий оставшуюся часть высоты страницы.Flex-элемент растягивается до остальной части страницы на flex 1.

Цель:
Мне нужна моя сетка (с ее дочерними элементами) внутри этого flex-элемента для расширенияк высоте flex-элемента.

Проблема:
Оболочка html имеет только набор min-height 100vh.Это делает сетку растянутой к элементу flex, но не к его дочерним элементам!

Единственное решение, которое я могу найти, - это также установить height 100vh в оболочке html, но я не хочу этого делать.Можно ли как-то решить мою проблему, не задав height?

См. Здесь код: https://codepen.io/mesqueeb/pen/aGeKjm

Смотрите анимированный GIF здесь, чтобы показать, что я имею в виду:

Answer 1

Вы можете попробовать это.

удалите 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>

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