title: 100vh results in scroll bar?
body: <p>I have some really simple html/css that uses 100vh on a body tag, and 100% (or 100vh, I've tried both) on two inline block span's, each span of which has a width of 50vw. I expect to see both spans side by side, each taking up half the screen, and each as tall as the screen - no scrollbars, no white space. Body also has a margin of 0 to help with this. What I see is what I expected except that there is a small vertical scroll bar. I also removed all whitespace from inside the body, as I know this can add space beyond the 100% width. But I can't figure out why I get the scrollbar... I know I can just add an overflow: hidden to body and the scrollbar goes away, but again - why the scrollbar in the first place?</p>
  
  <p>Here is the html file:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;style&gt;
      body {
          height: 100vh;
          margin: 0;
      }
  
      span {
          height: 100%;
          width: 50%;
          display: inline-block;
      }
  
      #left {
          background-color: red;
      }
  
      #right {
          background-color: green;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;span id="left"&gt;&lt;/span&gt;&lt;span id="right"&gt;&lt;/span&gt;&lt;/body&gt;
  &lt;/html&gt;
  </code></pre>