Force minimum items per row with Flexbox
<p>Using CSS flex, is it possible to force an equal number of items per row?</p>

<p>I am able to get the items to wrap, but not to have the same number per row (<a href="https://jsfiddle.net/jjvpLbgk/" rel="noreferrer">Fiddle</a>).</p>

<pre><code>.container {
    display: flex;
    flex-flow: row wrap;
    position: relative;
}

.container &gt; div {
    padding: 49px;
    flex: 1;
    box-sizing: border-box;
}
</code></pre>

<p>Here is a diagram of what I'm trying to accomplish:</p>

<p><a href="https://i.stack.imgur.com/xH80E.png" rel="noreferrer"><img src="https://i.stack.imgur.com/xH80E.png" alt="enter image description here"></a></p>