title: Problem using vw units when a vertical scrollbar appears (full-width elements in WordPress)
body: <p>I am working on a WordPress theme and want to enable users to use full-width blocks in it. For this I am using the following HTML/CSS structure (reduced to the basic problem).</p>
  <p>(note: although this is for a WordPress theme, the problem itself is not related to WordPress, but &quot;only&quot; a CSS problem, since I can even reproduce it with this very basic structure in a SO snippet)</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-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  html,
  body {
    margin: 0;
    height: 100%;
  }
  
  .content {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    overflow-y: visible;
    background: #eee;
  }
  
  .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
    &lt;p&gt;Some regular text. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,
      dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.&lt;/p&gt;
    &lt;p class="alignfull"&gt;
      Some more text - should be full width. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam
      lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. &lt;/p&gt;
    &lt;p&gt;Some regular text again. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
      ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So there is a <code>.content</code> container with a <code>max-width</code> pixel value, horizontally centered by using <code>margin: 0 auto;</code>. In there, regular blocks (i.e. the first and last <code>p</code> here) will have the default <code>width: auto</code>, so they will be as wide as their parent <code>.content</code>.</p>
  <p>To create a full-width container, the <code>.alignfull</code> class is applied (second <code>p</code> in my example). The left and right margins for this are defined as <code>calc(50% - 50vw);</code>, which (when the viewport is wider than the min-width of <code>.content</code>) should create a <em>negative</em> margin value that is exactly the distance between the content container and the edge of the viewport. That way that element should have the exact width of the viewport.</p>
  <p>But that doesn't work: the <code>.alignfull</code> element ends up being wider than the viewport by a few pixels.</p>
  <h3>What I realized:</h3>
  <p>It has to do with the vertical scrollbar: If the whole content is less high than the viewport (i.e. if no vertical scrollbar is visible), the problem doesn't appear. So, when a scrollbar is present, 100% width of a full-width element is less than 100vw.</p>
  <p>In the &quot;official&quot; <em>Twentynineteen</em> theme, this is solved in a completely different way which avoids the use of the <code>vw</code> unit and uses percentage values for the max-width of the content area. But I've seen tutorials that describe the method I have tried to use...</p>
  <p>Is there any way to make it work properly using a <code>px</code> value for the content container's width/max-width, as I did?</p>
  <hr />
  <h2>Addition after first answer</h2>
  <p>I should add that I had already used another method with which I am also not happy. This defines a <code>max-width</code> for <em>all</em>  direct children of the content container and changes that to 100% for <code>.alignfull</code>.</p>
  <p>However, this brings some other problems along: Floated elements don't stay inside the content area, but are floated far left or right, and elements which by default have left/right margins (like <code>blockquote</code>) loose their margin settings, which are overwritten by the more specific <code>.content&gt;*</code> selector's <code>margin: 0 auto</code> which is needed for centering. (see example below).</p>
  <p>I know that the WordPress block editor puts floated images into a non-floated block (which would then get the max-width and be centered), but I'd like to be able to use the same CSS also for post formats for which the block editor is deactivated (using &quot;Disable Gutenberg&quot;) and where therefore images are <em>not</em> necessarily wrapped in non-floated blocks, i.e. where floated images (which are not in any container elements) <em>would</em> end up far right/left.</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-css lang-css prettyprint-override"><code>* {
    box-sizing: border-box;
  }
  
  html,
  body {
    margin: 0;
    height: 100%;
  }
  
  .content&gt;* {
    max-width: 400px;
    margin: 0 auto;
    background: #eee;
  }
  
  blockquote {
    margin: 30px 40px;
    background: #fc7;
    color: red;
  }
  
  .floated_img {
    float: right;
    width: 20%;
    height: auto;
  }
  
  .alignfull {
    max-width: none;
    background: #ccc;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
    &lt;p&gt;Some regular text. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.&lt;/p&gt;
    &lt;img class="floated_img" src="http://lorempixel.com/output/food-h-c-117-198-7.jpg"&gt;
    &lt;p&gt;Some regular text. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.&lt;/p&gt;
    &lt;p&gt;Some regular text. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.&lt;/p&gt;
    &lt;p&gt;Some regular text. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante,dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.&lt;/p&gt;
    &lt;p class="alignfull"&gt;
      Some more text - should be full width. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam
      lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. &lt;/p&gt;
    &lt;blockquote&gt;This should be a blockquote&lt;/blockquote&gt;
    &lt;p&gt;Some regular text again. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
      ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. &lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>