title: div scrollbar not appearing
body: <p>I use css infrequently, but I thought that the following should create a scrollable area.  Instead, it seems to just hide all the text that doesn't fit but provides no way to scroll.  Behavior seems the same in chrome/ie/firefox, so I'm guessing I'm just doing something wrong.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/style.css"&gt;
      &lt;title&gt;Foo&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="history" class="scroll-area"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac euismod nulla. Fusce enim tortor, elementum ut volutpat non, interdum ut nunc. Vestibulum placerat mi vel risus ultricies non bibendum urna vestibulum. Curabitur volutpat, turpis vel suscipit accumsan, lectus nibh blandit sem, ut elementum massa tortor quis augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis cursus lacus ac diam sollicitudin tempor. Vivamus at sagittis lacus. Donec augue neque, cursus in tristique at, mattis vitae eros.
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>style.css</p>
  
  <pre><code>#history {
      height: 200px;
      width: 200px;
      border: 1px solid #666;
      padding: 8px;
  }
  
  .scroll-area {
      overflow-style: auto;
      overflow: hidden;
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/WYgxx.png" alt="Non-scrolling picture example"></p>