Below is the solution I came up with.
The unnecessary wrapper around weeks has been removed. Now both the weeks and the th elements are direct children of the calendar.
<main id="calendar">
<section class="th">
<span>Sunday</span>
<span>Monday</span>
<span>Tuesday</span>
<span>Wednesday</span>
<span>Thursday</span>
<span>Friday</span>
<span>Saturday</span>
</section>
<div class="week">
<div></div>
<div></div>
<div></div>
<div data-date="1"></div>
<div data-date="2"></div>
<div data-date="3"></div>
<div data-date="4"></div>
</div>
....
Here is the updated CSS:
/* Calendar 100% height */
#calendar {
height: 100%;
display: flex;
flex-flow: column nowrap;
align-items: stretch;
}
.th {
flex: 30px 0 0;
}
.week {
flex: 30px 1 0;
border-bottom: 1px solid #ccc;
}
The key point here is to assign a fixed height (flex-basis: 30px) to the th element without allowing it to grow, and then give some initial height to the week element while allowing it to expand (flex-grow: 1).
This setup ensures that the weeks occupy all remaining space within the calendar after accommodating the th element, distributing the space equally between them.
Check out the updated fiddle here