title: Large first item with a flexbox layout?
body: <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>