title: Why does flex-box work with a div, but not a table?
body: <p>The following simple snippet results in a single web page that takes up the available screen space with a header at the top, a footer at the bottom, and the main content taking up as much space as possible (with a dotted border to make it easier to see):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  body {
    display: flex;
    flex-flow: column;
  }
  
  h1, small {
    flex: 0 1 auto;
  }
  
  div {
    flex: 1 1 auto;
    border: 1px dotted;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;h1&gt;Some Header&lt;/h1&gt;
      &lt;div&gt;Some Text&lt;/div&gt;
      &lt;small&gt;Some Footer&lt;/small&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I modify the CSS and HTML to instead use a <code>table</code> in place of a <code>div</code>, it doesn't expand the table to consume the available space:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  body {
    display: flex;
    flex-flow: column;
  }
  
  h1, small {
    flex: 0 1 auto;
  }
  
  table {
    flex: 1 1 auto;
    border: 1px dotted;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;body&gt;
      &lt;h1&gt;Some Header&lt;/h1&gt;
      &lt;table&gt;&lt;tr&gt;&lt;td&gt;Some Content&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
      &lt;small&gt;Some Footer&lt;/small&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why does the first version (with <code>div</code>) work but the second version (with <code>table</code>) not? And is there a way to fix the second example so the table expands and consumes all available space (without introducing scroll bars)?</p>
  
  <p>Some notes: my table will have a row of headers (all with equal width) and several rows (all with equal width/height). I know it's possible to recreate a table using a bunch of <code>div</code>s and more CSS, but going down that route feels like throwing out the baby with the bathwater (and besides, I wouldn't get to ask this question and learn if I just hacked around it). Also, JavaScript isn't available to me here (and seems like overkill).</p>
  
  <p>I know enough CSS/HTML to get myself into trouble but not enough to get myself out of it...</p>
  
  <p><strong>Edit:</strong> aavrug's suggestion to use <code>display: flex</code> for the <code>table</code> makes it so the table properly expands to fill the area, but when I add multiple rows/columns to the table they are no longer equidistributed. I'd like to preserve the <code>table</code>'s cell equidistribution.</p>