CSS минимальная высота контейнера

Question

У меня проблема с настройкой моего контейнера сетки так, чтобы он растягивал его высоту до содержимого. При изменении размера окна сама сетка работает нормально, к сожалению, контейнер сохраняет ту же высоту, хотя я использую свойство min-height, в результате которого отображаются только 3 ячейки из 9. Переполнение: visible также не решает мою проблему. Спасибо за вашу помощь!

CSS:

#grid_content {
    position: absolute;
    right: 0;
    top: 100px;
    width: calc(100% - 220px);
    padding-bottom: 50px;
    z-index: -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    grid-template-rows: repeat(auto-fit, minmax(250px, 28vh));
    min-height: 80vh;
}

.grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
    float: left;
}

Answer 1

Возможно, вам нужно что-то вроде этого, закомментируйте:

grid-template-rows: repeat(auto-fit, minmax(250px, 28vh));

и представьте два новых класса, один для минимальной высоты, другой для максимальной высоты - как в этом примере :

JSFiddle

Удалите комментарий к части "overflow: hidden", чтобы увидеть окончательный результат.