У меня есть макет календаря с использованием следующих стилей CSS-сетки:
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1.5em 1.5em repeat(6, 1fr);
width: 100%;
height: 100%;
}
(Codepen https://codepen.io/joelhoward0/pen/vJLmWK)
Первые две строки - это заголовок 'control' и заголовки дней недели, за которыми следуют div для каждого дня месяца:
<div class="day">
<div class="header">26</div>
<div class="content"></div>
</div>
У каждого дня есть .header и .content div. Я хочу, чтобы div .header занимал 1/5 высоты строки, а содержимое занимало 4/5 и прокручивалось, если содержимое переполняется.
Однако любая комбинация стилей, которые я пробовал, просто приводит к .content росту, компенсируя сжатие других строк сетки. Я предполагаю, что это связано с использованием 1fr в контейнерах grid-template-rows.
Можно ли достичь максимальной высоты 4/5 высоты строки сетки, что составляет 1/6 доступного вертикального пространства на .content div?
(Примечание: установка overflow-y: auto; на .day обеспечивает то, что я хочу, но заголовок включается в область прокрутки. Установка overflow-y: auto; на .content, похоже, ничего не дает.)
