title: Horizontal scrollbar hidden under vertical overflow
body: <p>My goal is to create a table with certain conditions:</p>
  <ol>
  <li>If display width is too small to fit contents, add horizontal scrollbar and do not shrink cells.</li>
  <li>If display height is too small to fit contents, add vertical scrollbar and do not shrink cells.</li>
  </ol>
  <p>I managed to achieve this, but I have a problem where if both display width and height are too small to fit contents, the vertical scrollbar is perfect, but horizontal scrollbar is hidden under the vertical overflow. So if a user would like to see the entire first row, he/she needs to scroll vertically to the end, then scroll horizontally to the end, and finally scroll vertically back up to see the first row.<br />
  Here is a JSFiddle example: <a href="https://jsfiddle.net/totsik/fr24Ldyb/7/" rel="nofollow noreferrer">https://jsfiddle.net/totsik/fr24Ldyb/7/</a><br />
  CSS and HTML:</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>.main-container {
     background-color: #222C2A;
     color: #F3EED9;
     margin: 3rem 5%;
  }
  
  .container {
     overflow-y: auto;
     padding: 2rem;
     min-height: 50vh;
     max-height: 70vh;
     border: 2px solid #222C2A;
  }
  
  table {
     overflow-x: auto;
     display: block;
     border-collapse: collapse;
     width: 100%;
  }
  
  tr.table-head-row th {
     border-style: solid;
     border-width: 2px 0;
     border-color: #F3EED9;
  }
  
  tr td {
     text-align: center;
  }
  
  tr td:first-child {
     text-align: left;
  }
  
  th {
     width: 100%;
     background: #222C2A;
     text-align: left;
     padding: 1rem 2rem;
  }
  
  td {
     font-size: 1rem;
     padding: 0.75rem 1.5rem;
     background-color: #F3EED9;
     color: #222C2A;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main-container"&gt;
     &lt;div class="container"&gt;
        &lt;table&gt;
           &lt;thead&gt;
              &lt;tr class="table-head-row"&gt;
                 &lt;th class=""&gt;header 1&lt;/th&gt;
                 &lt;th class=""&gt;header 2&lt;/th&gt;
                 &lt;th class=""&gt;header 3&lt;/th&gt;
                 &lt;th class=""&gt;header 4&lt;/th&gt;
                 &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
           &lt;/thead&gt;
           &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
              &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
              &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
              &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
              &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
              &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
              &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
              &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
              &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
              &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
           &lt;tr&gt;
              &lt;td&gt;data 1&lt;/td&gt;
              &lt;td&gt;data 2&lt;/td&gt;
              &lt;td&gt;data 3&lt;/td&gt;
              &lt;td&gt;data 4&lt;/td&gt;
              &lt;td&gt;&lt;button&gt;button&lt;/button&gt;&lt;/td&gt;
           &lt;/tr&gt;
        &lt;/table&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>What I would like to happen is that if both height and width are too small, the scrollbars will be both visible. How should I change my code to accomplish this?</p>
  <p><strong>UPDATE:</strong> updated jsfiddle. Also forgot to mention that I would like the to be vertical scrollbar on the container div not the table itself.</p>