title: Make element consume free space in a container
body: <p>I have a page which is supposed to look thus:</p>
  
  <p><a href="https://i.stack.imgur.com/ud44D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ud44D.png" alt="The way it&#39;s supposed to look"></a></p>
  
  <p>It's the header here that's the cause of my problems. It contains: </p>
  
  <ol>
  <li><p>An icon, in the far left end, which has a fixed size</p></li>
  <li><p>A title, just to the right of the icon, which takes up just as much space as needed to fit the title text on one line</p></li>
  <li><p>Sometimes, a subtitle arranged below the title</p></li>
  <li><p>Sometimes, a box with some auxiliary stuff arranged to the right of the titles, using up any left-over space</p></li>
  </ol>
  
  <p>I don't want to nest these elements, for various reasons (including but not limited to perfectionism), and I'm <em>almost</em> there... except that I can't get the last box, "auxiliary stuff", to fill the remaining space.</p>
  
  <p>I've built this as columns, with the icon being 100% height, title and subtitle being &lt;50% height, and the aux box being having 100% height. Giving the aux box a fixed width works fine, but when I try to make it grow horizontally with <code>width: 100%</code>, the 100% seems to mean "100% of the surrounding box" (in my case, <code>&lt;heading&gt;</code>) rather than "100% of the remaining space", which makes it overflow.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { padding: 0; margin: 0; height: 100%; width: 100%; font: 10px sans-serif }
  
  /* Colors to please the eyes */
  article { border: 5em solid limegreen; }
  header { border: 1px solid tomato; }
  .icon { background-color: cyan; }
  h1 { background-color: magenta; }
  h2 { background-color: yellow; }
  .aux { background-color: lavender; }
  
  /* Arrange them boxes */
  article {
      display: flex;
      flex-flow: column nowrap;
  }
  header {
      display: flex;
      flex-flow: column wrap;
      align-content: flex-start;
      height: 5em;
  }
  .icon { width: 5em; height: 100% }
  h1 { font-size: 200%; margin: 0 }
  h2 { font-size: 150%; margin: 0  }
  .aux { height: 100%; width: 100%; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;article&gt;
    &lt;header&gt;
      &lt;div class=icon&gt;ICON&lt;/div&gt;
      &lt;h1&gt;Main header&lt;/h1&gt;
      &lt;h2&gt;Subheading here&lt;/h2&gt;
      &lt;div class=aux&gt;MOAR STUFF&lt;/div&gt;
    &lt;/header&gt;
    &lt;section&gt;
      Lorem ipsum dolor sit amet...
    &lt;/section&gt;
  &lt;/article&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can I make the last box grow horizontally, <em>without</em> changing the markup?</p>