title: CSS: position absolute has conflicting screen width with position fixed in chrome when there's a vertical overflow
body: <p>I am currently programming a site with a video banner set to fixed positioning in the background, and a div that has absolute positioning slightly covering part of the video on the bottom half. The problem is however, once I add this second div with absolute positioning, the width of the screen becomes bigger under the condition there is a vertical overflow on the screen contained within this div, which in turn messes up the video sizing.</p>
  <p>Here is my code:</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-html lang-html prettyprint-override"><code>   &lt;div class="row" style="height: 5%;"&gt;
          &lt;div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="background-color: black; box-shadow: 0px 10px 5px #000000; z-index:5; padding:0;"&gt;
              Search
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container-fluid video" style="height:70%; z-index:5; padding:0; margin:0;"&gt;
      &lt;div class="row" style="padding:0; margin:0; height: 100%;"&gt;
          &lt;div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" id="video-container" style="background-color:white; height:100%; padding:0; margin:0;"&gt;
              &lt;video autoplay="" loop="" style="position: fixed; right:0px; bottom: 0; min-width: 100%; min-height: 100%; transform: translateX(calc((100% - 100vw) / 2));"&gt;
                  &lt;source src="beats/titlescreen.mp4" type="video/mp4"&gt;
              &lt;/video&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container-fluid header" style="background-color: red; position:absolute; height:100%;"&gt;
  This is a test
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Since I set a height of 100% in the last div seen in the above code, there is a vertical overflow on the page which makes the width slightly bigger than if there was no overflow (if you take away the 'height: 100%;' tag this will become apparent).</p>
  <p>I am unsure why this happens, and why it is solely contained to Chrome. Any ideas?</p>