Flexbox wrapping nested rows without media query - html

Question

I've got four div's in a flexbox grid. I want them to wrap two at a time, like this:
+-----------------------+
| 1 | 2 | 3 | 4 |
+-----------------------+
+-----------+
| 1 | 2 |
+-----------+ THIS IS WHAT I WANT
| 3 | 4 |
+-----------+
+-----+
| 1 |
+-----+
| 2 |
+-----+
| 3 |
+-----+
| 4 |
+-----+
Now, this seems easy enough, just nest them inside new flex containers and apply flex-wrap, and give the cells some min-widths. However, this has the side-effect of making the middle view look like this:
+-----------+
| 1 | 3 |
+-----------+ NOT WHAT I WANT
| 2 | 4 |
+-----------+
Apparently, flexbox wants to first wrap the inner div's instead of considering them rows. In order to keep all of the other wrapping working, setting flex-basis (to e.g. 100%) for the nested div's is not an option. In order to keep everything dynamic (for instance adding a third cell to one of the rows), setting %-widths on the cells is not an option. And in order to avoid hard breakpoints and base wrapping on (dynamic) content width, I'd really like to avoid media queries.
Can this be achieved with flexbox and without media queries?
JSFiddle
div {
box-sizing: border-box;
margin: 2px;
}
.grid {
display: flex;
flex-flow: row wrap;
border: 2px solid blue;
flex: 1;
}
.cell {
flex: 1;
min-width: 100px;
border: 2px solid red;
background: white;
height: 100px;
}
<div class="grid">
<div class="grid">
<div class="cell">1</div>
<div class="cell">2</div>
</div>
<div class="grid">
<div class="cell">3</div>
<div class="cell">4</div>
</div>
</div>
EDIT: I know I can make the inner .grid not wrap at all, but what I really want is for all the cells to wrap below each other if space is super tight. (As in the first illustration.)

Answer 1

You need to tell the children-elements of .grid .grid to flow in a row:
div {
box-sizing: border-box;
margin: 2px;
}
.grid {
display: flex;
flex-flow: row wrap;
border: 2px solid blue;
flex: 1;
}
.grid .grid {
flex-flow: row; /* this is your fix */
}
.cell {
flex: 1;
min-width: 100px;
border: 2px solid red;
background: white;
height: 100px;
}
<div class="grid">
<div class="grid">
<div class="cell">1</div>
<div class="cell">2</div>
</div>
<div class="grid">
<div class="cell">3</div>
<div class="cell">4</div>
</div>
</div>

Answer 2

Note, there is no specific Flexbox property that replace a media query, and no need either as media queries is perfect for this, better than any other available method or property.
The trick here is to make the inner grid's to wrap before the cell's does. For that to happen they also need a minimum width, which is wider than the sum of the 2 cell's.
The downside with that extra min-width is it will also affect the cell's width on narrower screens
Fiddle demo 1
Stack snippet
div {
box-sizing: border-box;
margin: 2px;
}
.grid-outer {
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
}
.grid-inner {
flex: 1;
display: inline-flex;
flex-wrap: wrap;
border: 2px solid blue;
min-width: 210px;
}
.cell {
flex: 1;
min-width: 100px;
border: 2px solid red;
background: white;
height: 100px;
}
<div class="grid-outer">
<div class="grid-inner">
<div class="cell">1</div>
<div class="cell">2</div>
</div>
<div class="grid-inner">
<div class="cell">3</div>
<div class="cell">4</div>
</div>
</div>
An option is to drop the Flexbox properties on the outer grid and set the inner grid's to inline-flex and let the cells grow with their content.
The downside with this is that the cell's won't fill their parents width
Fiddle demo 2
Stack snippet
div {
box-sizing: border-box;
margin: 2px;
}
.grid-outer {
display: inline-block;
}
.grid-inner {
display: inline-flex;
flex-wrap: wrap;
border: 2px solid blue;
}
.cell {
flex: 1;
min-width: 100px;
border: 2px solid red;
background: white;
height: 100px;
}
<div class="grid-outer">
<div class="grid-inner">
<div class="cell">1</div>
<div class="cell">2</div>
</div>
<div class="grid-inner">
<div class="cell">3</div>
<div class="cell">4</div>
</div>
</div>
The absolute best solution here is a combination of Flexbox and a media query, where one use the query to alter the outer grid's flex direction to column...
Fiddle demo
Stack snippet
div {
box-sizing: border-box;
margin: 2px;
}
.grid-outer {
display: flex;
border: 2px solid blue;
}
.grid-inner {
flex: 1;
display: flex;
border: 2px solid blue;
}
.cell {
flex: 1;
min-width: 100px;
border: 2px solid red;
background: white;
height: 100px;
}
#media (max-width: 600px) {
.grid-outer {
flex-direction: column;
}
}
<div class="grid-outer">
<div class="grid-inner">
<div class="cell">1</div>
<div class="cell">2</div>
</div>
<div class="grid-inner">
<div class="cell">3</div>
<div class="cell">4</div>
</div>
</div>
...or drop the inner grid's all together and change the cell's flex basis
Fiddle demo
Stack snippet
div {
box-sizing: border-box;
margin: 2px;
}
.grid-outer {
display: flex;
flex-wrap: wrap;
border: 2px solid blue;
}
.cell {
flex: 1;
min-width: 100px;
border: 2px solid red;
background: white;
height: 100px;
}
#media (max-width: 600px) {
.cell {
flex-basis: calc(50% - 4px);
}
}
<div class="grid-outer">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
</div>

Answer 3

Having different definitions for the grids does the job. I redefined them as outer and inner grid.
EDIT: Added wrap for .grid-inner to cover width < 200px
div {
box-sizing: border-box;
margin: 2px;
}
.grid-outer {
display: flex;
flex-flow: row wrap;
border: 2px solid blue;
flex: 1;
width: 230px; /* for demo purposes */
}
.grid-inner {
display: flex;
border: 2px solid green;
flex-wrap: wrap;
}
.cell {
flex: 1;
min-width: 100px;
border: 2px solid red;
background: white;
height: 100px;
}
<div class="grid-outer">
<div class="grid-inner">
<div class="cell">1</div>
<div class="cell">2</div>
</div>
<div class="grid-inner">
<div class="cell">3</div>
<div class="cell">4</div>
</div>
</div>