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: 0066.666%;
}
.header-cell2 {
    flex-wrap: wrap;
    flex: 0033.333%;
    display: flex;
    flex-flow: column;
    text-align: center;
}

.header-cell3 {
    display: flex;
    justify-content: center;
    flex: 00 auto;
}
.header-cell4 {
    display: flex;
    justify-content: center;
    flex: 10 auto;
}

HTML

<divid="header"><divclass="header-grid1"><divclass="header-cell1"><imgsrc="image.png"></div><divclass="header-cell2"><divclass="header-cell3"><imgsrc="image.png"alt="text"><divclass="flexcenter"><ahref="link">text</a></div></div><divclass="header-cell4"><imgsrc="image.png"alt="text"><divclass="flexcenter"><ahref="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.