Nested Flexbox Not Expanding

I am trying to create a dual column layout where the second column is also a grid with two cells inside of it. However the two cells in the nested grid are not expanding to fill th

Solution 1:

Your problem was, that you didn't tell header-cell4 to grow. You can do that with the flex-shortcut: flex: 1 0 auto (whereas the first value is flex-grow, the second value is flex-shrink and the third value is flex-basis).

If you want to learn more about flexbox, I recommend the css-tricks flexbox guide.

Here is the working code:

CSS

.header-grid1 {
    display: flex;
}
.header-cell1 {
    flex-wrap: wrap;
    display: flex;
    flex: 0 0 66.666%;
}
.header-cell2 {
    flex-wrap: wrap;
    flex: 0 0 33.333%;
    display: flex;
    flex-flow: column;
    text-align: center;
}

.header-cell3 {
    display: flex;
    justify-content: center;
    flex: 0 0 auto;
}
.header-cell4 {
    display: flex;
    justify-content: center;
    flex: 1 0 auto;
}

HTML

<div id="header">
    <div class="header-grid1">
        <div class="header-cell1">
            <img src="image.png">
        </div>
        <div class="header-cell2">
            <div class="header-cell3">
                <img src="image.png" alt="text">
                <div class="flexcenter">
                    <a href="link">text</a>
                </div>
            </div>
            <div class="header-cell4">
                <img src="image.png" alt="text">
                <div class="flexcenter">
                    <a href="link">text</a>
                </div>
            </div>
        </div>
    </div>
</div>

JSFiddle: http://jsfiddle.net/9gryLby6/2/

And please next time you post, give us your actually working CSS code, and not stuff like .header-cell3and4. It took me some time just to reproduce your problem.