title: CSS grid where one column shrinks to fit content, the other fills the remaning space
body: <p>I need to create a horizontal layout where one block takes all available space and the other ones shrink to fit their content.</p>
  
  <p>For example:
  </p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
      &lt;div class="expand"&gt;Long text label&lt;/div&gt;
      &lt;div class="shrink"&gt;Button&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>A more complex example with two rows (an actual grid):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="grid"&gt;
      &lt;div class="row"&gt;
          &lt;div class="shrink"&gt;...&lt;/div&gt;
          &lt;div class="expand"&gt;...&lt;/div&gt;
          &lt;div class="shrink"&gt;...&lt;/div&gt;
          &lt;div class="shrink"&gt;...&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="shrink"&gt;...&lt;/div&gt;
          &lt;div class="expand"&gt;...&lt;/div&gt;
          &lt;div class="shrink"&gt;...&lt;/div&gt;
          &lt;div class="shrink"&gt;...&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My requirements:</p>
  
  <ol>
  <li>The large block should fill all available space even if short</li>
  <li>The small blocks should fit their content</li>
  <li>The large block (usually a text label) may be a single word larger that the available space, so it should be truncated in this case</li>
  <li>The large block should not wrap if multi-word</li>
  <li>The small blocks should not wrap (though in the case of multiple buttons or icons, this can be solved by making one block per component)</li>
  <li>Support multiple rows (i.e. columns should be aligned)</li>
  </ol>
  
  <p>I am targeting Android and iOS smartphones.</p>
  
  <p>I have tried to adapt the code from <a href="https://stackoverflow.com/a/2251833/2093341">this answer</a> but I could not make it work for multiple rows. Also, the source code must be out of order, which is confusing (though not blocking for my use case). Here's a jsfiddle: <a href="http://jsfiddle.net/k3W8L/" rel="noreferrer">http://jsfiddle.net/k3W8L/</a></p>