title: How to make screen scrollable vertically when part of the content overlaps
body: <p>Imagine I have a div with fixed size like this:</p>
  
  <pre><code>&lt;div style="width: 1000px; height: 200px; border: solid;"&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>It's just a rectangle with solid border. Now when I zoom the screen, part of the rectangle is left out of screen (because it has fixed size). What I want is, when the part goes out of screen, there must appear a horizontal scroll bar, what to do? (Please don't suggest <code>overflow-x: scroll;</code> because it creates scrollbar even when it's not needed.)</p>