CODEWITHSUNDEEP
htmlcssflexbox
Xiaous
Xiaous

Reputation: 47

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 their container.

How I'd like it: How I'd like it

How it is: How it is

When I set .header-cell3and4 to have flex: 1 instead of display: flex it messes up the positioning of my images inside the cell. 

.header-grid1 { display: flex; }
.header-cell1 { flex: 0 0 66.6666%; }
.header-cell2 { flex: 0 0 33.3333%; }
.header-grid2 { display: flex; flex-flow: column; align-self: flex-start; text-align: center; }
.header-cell3and4 { display: flex; justify-content: center; }


<div id="header">
    <div class="header-Grid1">
        <div class="header-cell1">
            <img src="image.png">
        </div>

        <div class="header-cell2">
            <div class="header-grid2">
                <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>
</div>

Upvotes: 1

Views: 4105

Answers (1)

nils
nils

Reputation: 27174

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.

Upvotes: 6

Related Questions