CSS3 Flex - Stretch Width and Height

Question

I'd like to make a full screen calendar application using the CSS3 Flex model. While I can make the calendar fit quite nicely horizontally, I can't find a way to also let the calendar weeks stretch in equal proportion to consume all the available height.

Here's a jsFiddle to illustrate my dilemma: http://jsfiddle.net/CgXLa/

The weeks are equally distributed until I make them display: flex;. Even if I encompass all of the days into a div element and make that display: flex; instead of each week, I still have the same problem.

How can I use the Flex model to stretch both horizontally and vertically?

Answer 1

Here is my solution.

I have removed an extra wrapper around weeks. Now the weeks and the th are all direct descendants of 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>
    ....

Now my CSS is

/* 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 is to give the th element a definite height (flex-basis: 30px) but no flex-grow, and the week also some height to start with, but flex-grow: 1.

This makes the weeks take all the remaining space from calendar not used by th, evenly between them.

updated fiddle