Flexbox wrapping nested strings without media query

Question

I have four divs in a flexbox grid. I want them to wrap two at a time, for example:

+-----------------------+
|  1  |  2  |  3  |  4  | 
+-----------------------+
+-----------+
|  1  |  2  |
+-----------+    THIS IS WHAT I WANT
|  3  |  4  |
+-----------+
+-----+
|  1  |
+-----+
|  2  |
+-----+
|  3  |
+-----+
|  4  |
+-----+

Now that seems simple enough, just insert them into new flexible containers and apply flex-wrap and give the cells some minimal width. However, this has a side effect: the average view looks like this:

+-----------+
|  1  |  3  |
+-----------+    NOT WHAT I WANT
|  2  |  4  |
+-----------+

-, flexbox div, . , flex- (, 100%) div . (, ), % -widths . , () , -.

flexbox -?

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>

Hide result

EDIT: , .grid , , , . ( .)

Answer 1

.grid .grid :

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>

Hide result

Answer 2

: Flexbox, -, , - , , .

, grid cell. , , 2 cell.

min-width cell

1

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>

Hide result

---

, Flexbox grid grid inline-flex, cell .

, cell

2

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>

Hide result

---

Flexbox -, , grid flex ...

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>

Hide result

... grid cell flex

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>

Hide result

Answer 3

, . .

EDIT: ​​ .grid-inner, & ​​lt; 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>

Hide result