title: Flexbox table layout with custom scroll
body: <p>I am struggling to get my flexbox layout to scroll as I need. My requirements are:</p>
  <ol>
  <li>Fixed size container</li>
  <li>Fixed header and footer</li>
  <li>Table to scroll horizontally</li>
  <li>Table body to scroll vertically</li>
  </ol>
  <p>I am hoping to do the above with only defining the sizes of:</p>
  <ol>
  <li>The container width/height</li>
  <li>The cell width</li>
  <li>Cell content height (the blue squares in the below fiddle).</li>
  </ol>
  <p>Is this possible or do I need to define more widths/heights? In the fiddle I also notice that when the table scrolls horizontally, the background colours are lost. How can this be conserved? Link to the fiddle:</p>
  <p><a href="https://jsfiddle.net/talbot82/83wrktvb/6/" rel="nofollow noreferrer">https://jsfiddle.net/talbot82/83wrktvb/6/</a></p>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;container&quot;&gt;
    &lt;div id=&quot;header&quot;&gt;Header&lt;/div&gt;
    &lt;div id=&quot;table&quot;&gt;
      &lt;div id=&quot;tableHeader&quot;&gt;
        &lt;div class=&quot;tableCell&quot;&gt;Column1&lt;/div&gt;
        &lt;div class=&quot;tableCell&quot;&gt;Column2&lt;/div&gt;
        &lt;div class=&quot;tableCell&quot;&gt;Column3&lt;/div&gt;
        &lt;div class=&quot;tableCell&quot;&gt;Column4&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id=&quot;tableBody&quot;&gt;
        &lt;div class=&quot;tableRow&quot;&gt;
          &lt;div class=&quot;tableCell&quot;&gt;
            &lt;div class=&quot;fixedSize&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;tableRow&quot;&gt;
          &lt;div class=&quot;tableCell&quot;&gt;
            &lt;div class=&quot;fixedSize&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;tableRow&quot;&gt;
          &lt;div class=&quot;tableCell&quot;&gt;
            &lt;div class=&quot;fixedSize&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;tableRow&quot;&gt;
          &lt;div class=&quot;tableCell&quot;&gt;
            &lt;div class=&quot;fixedSize&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;tableRow&quot;&gt;
          &lt;div class=&quot;tableCell&quot;&gt;
            &lt;div class=&quot;fixedSize&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;tableCell&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id=&quot;footer&quot;&gt;Footer&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>#container {
    width: 400px;
    height: 200px;
    display: flex;
    flex-direction: column;
  }
  
  #header, #footer {
    background-color: #666;
  }
  
  #table {
    overflow-x: scroll;
    overflow-y: hidden;
  }
  
  #tableHeader {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #AAA;
  }
  
  #tableBody {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
  }
  
  .tableRow {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #DDD;
  }
  
  .tableCell {
    padding: 4px;
    width: 300px;
    flex-shrink: 0;
    border: solid 1px black;
  }
  
  .fixedSize {
    width: 40px;
    height: 40px;
    background-color: blue;
  }
  </code></pre>