Large first item with a flexbox layout?
<p>I have a layout consisting of a <strong>single ordered list</strong> containing a bunch of items.</p>

<p>All items have consistent width and height - except the first item - which is (3x) wider and (2x) taller.  It looks like this:</p>

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

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override"><code>ol {
  padding:0;
  margin:0;
  min-width: 488px;
}
li {
  list-style: none;
  width: 150px;
  padding-bottom: 16.66%;
  border: 5px solid tomato;
  display: inline-block;
}
li:first-child {
  float:left;
  width: 478px;
  border-color: green;
  padding-bottom: 34.25%;
  margin: 0 4px 4px 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ol&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
  &lt;li&gt;&lt;/li&gt;
&lt;/ol&gt;</code></pre>
</div>
</div>
</p>

<h2><a href="http://codepen.io/danield770/pen/BzmOvR?editors=1100" rel="nofollow noreferrer">Codepen Demo</a> (Resize viewport to see effect)</h2>

<p>Currently, i'm using floats and inline-blocks to achieve the layout, but i'd like to use flexbox because of some extra features which flexbox offers.</p>

<p>I have made a couple of attempts, but with no success - </p>

<p>Attempt #1 - <a href="http://codepen.io/danield770/pen/RRjZAK?editors=1100" rel="nofollow noreferrer">Codepen</a></p>

<pre><code>ol {
  /* ... */
  display: flex;
  flex-wrap: wrap;
}
</code></pre>

<p>Attempt #2 - <a href="http://codepen.io/danield770/pen/LkOgxN?editors=1100" rel="nofollow noreferrer">Codepen</a></p>

<p>Use a float before the list to secure space for the first large list item</p>

<p>Then set display absolute on the first list item.</p>

<p>In both attempts, the red boxes in the first line stretch to fill the height of the first item. </p>

<p>Is this possible?</p>

<p>(If not, then I would be interested in a CSS grid workaround)</p>