Flexbox grid: cells won't grow - css

Question

I'm trying to create a grid layout based on flexbox:
.container {
width: 360px; /* Try to change this. Possible values: 240px, 360px, 480px.*/
background: #eee;
display: flex;
flex-flow: row wrap;
margin: 0 -10px;
}
.cell {
box-sizing: border-box;
padding: 10px;
flex: 0 0 120px;
max-width: 120px;
}
.cell.wide {
flex: 1 0 120px;
max-width: 240px;
}
.inner {
background: red;
height: 100px;
color: #fff;
padding: 10px;
box-sizing: border-box;
}
.wide .inner {
background: blue;
}
<div class="container">
<div class="cell">
<div class="inner">1</div>
</div>
<div class="cell wide">
<div class="inner">2</div>
</div>
<div class="cell">
<div class="inner">3</div>
</div>
<div class="cell">
<div class="inner">4</div>
</div>
<div class="cell wide">
<div class="inner">5</div>
</div>
<div class="cell">
<div class="inner">6</div>
</div>
<div class="cell wide">
<div class="inner">7</div>
</div>
<div class="cell">
<div class="inner">8</div>
</div>
<div class="cell">
<div class="inner">9</div>
</div>
<div class="cell">
<div class="inner">10</div>
</div>
<div class="cell">
<div class="inner">11</div>
</div>
<div class="cell wide">
<div class="inner">12</div>
</div>
<div class="cell">
<div class="inner">13</div>
</div>
</div>
This JSFiddle helps to illustrate my problem.
A container element .container can contain any number of cells.cell. There are two types of cells: a regular one with a fixed width (the red ones in the jsfiddle) and a wide one .cell.wide (the blue ones) which are twice as wide but could shrink to the width of the regular cell if there is not enough space in the current row. Each row must be filled completely.
So in the example (see fiddle):
Cell #2 should be wide and push #3 to the next row.
In the second row, which then contains #3, #4 and #5, cell #5 should stay small, because there's no space for a larger cell and rows should be filled completely.
etc
By the way: The grid container is of variable width and rows can therefore contain between two and four cells. You can try this out in the fiddle by changing to width to the specified possible values.
After trying around in the fiddle for the whole morning and trying numerous combinations of the flex, width, min-width and max-width properties I definitely need you help! Thanks in advance!
I already have a Javascript workaround (counting columns and adding classes) but would much prefer a CSS-only solution.

Answer 1

I believe the answer is that what you're looking for is not possible with Flexbox. The reason is that the sizing algorithm (in simplified terms) uses a couple of steps to determine the actual size of the element:
Determine the preferred minimum size (the value of flex-basis if set to a length/percentage, the value of main axis size if declared to be auto, and min-content size if not). In your case, both .cell and .cell.wide prefer 120px.
Place items as if they had the preferred size.
Evaluate each resulting line (in a wrapping flex flow) and determine any remaining space.
Distribute remaining space (per line) according to flex-grow.
In your case, this means that each item (regardless if .wide or not) will evaluate to a preferred size of 120px, and thus fits 3 items on each row. At this point, the flex-grow factor does nothing, as there isn't any space left to grow, so the fact that .wide items have a flex-grow of 1 is irrelevant. I think your example would require a form of "sometimes min-width, sometimes not" behavior that flexbox just doesn't do — there would be too many layout passes for the browser to do (e.g. reflowing into lines several times etc).
The only CSS-based solution I can think of is to hardcode all the possible scenarios in something akin to "Quantity Queries", but that would get unwieldy fast...
Closest I can get with flexbox is something like https://jsfiddle.net/qde5xq09/1/.