Nested flexbox does not expand
I am trying to create a two column layout where the second column is also a grid with two cells inside it. However, the two cells in the nested grid do not expand to fill their container.
How I would like:
Like this:
When I set .header-cell3and4
for flex: 1
instead display: flex
, it will interfere with the positioning of my images within 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>
source to share
Your problem was that you didn't say header-cell4
grow. You can do this with flex-shortcut: flex: 1 0 auto
(whereas the first value flex-grow
, the second value flex-shrink
, and the third value are flex-basis
).
If you want to learn more about flexbox, I recommend the css-tricks flexbox guide .
Here's 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 valid CSS, not how .header-cell3and4
. It took me a while to reproduce your problem.
source to share