title: CSS make a div small with horizontal scrollbar compacts the content
body: <p>I have a table that I want to make in small div with horizontal (on horizontal)scroll bar (for small device)
  I tried to add :</p>
  
  <pre><code>overflow-x: auto;
  max-height: 100vh;
  max-width: 200px;
  </code></pre>
  
  <p>I see the scrollbar but the div content is compacted (see picture), plus I see vertical too which I don't want to have
  Am I missing something ??
  Here is my code <a href="https://jsfiddle.net/zzahcq8a/" rel="nofollow noreferrer">https://jsfiddle.net/zzahcq8a/</a></p>
  
  <p><a href="https://i.stack.imgur.com/N5drE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/N5drE.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/5sQ5J.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5sQ5J.png" alt="enter image description here"></a></p>