title: Giving Right-Padding to Overflowing CSS Multi-Column Layouts
body: <p>I'm creating a page flow that breaks up a sizable amount of content into columns that stack off to the right, as far as they need to. In other words, I'm trying to create a layout that <em>only</em> scrolls horizontally. This is easy enough with the CSS <code>columns</code> property. I have some markup like</p>
  
  <pre><code>&lt;div class="document-flow"&gt;
    &lt;p&gt;Some text&lt;/p&gt;
    &lt;p&gt;A lot more text&lt;/p&gt;
    ...
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS</p>
  
  <pre><code>.document-flow {
    box-sizing: border-box;
    padding: 5rem;
    height: 100vh;
    width: 100vw;
  
    columns: 25rem;
    column-fill: auto;
    column-gap: 3rem;
  }
  </code></pre>
  
  <p>that gives basically the effect I'm looking for. With enough content, I can scroll to the right to see all my columns.</p>
  
  <p><strong>However,</strong> when I scroll all the way to the end, the last column sits directly against the right edge of the browser. The padding from the container, of course, does not apply because columns laid out this way constitute overflow. It doesn't look great.</p>
  
  <p>I'd like it to have the same <code>5rem</code> padding on the right, but I haven't found a way to do it.</p>
  
  <hr>
  
  <p>The closest I've gotten is to add a pseudo-element to the end of the flow, that is always 5 rem wider than the column width. (I have <a href="https://codepen.io/vy_let/pen/KBVzao?editors=1100" rel="nofollow noreferrer">a demo of this layout in CodePen</a>.)</p>
  
  <pre><code>.document-flow::after {
    content: '';
    display: inline-block;
    width: calc(100% + 5rem);
  }
  </code></pre>
  
  <p>Unfortunately, this only seems to work in Firefox. Chrome and Safari simply clip the extra width of this wider element without letting the user scroll to see it.</p>
  
  <p>I've considered how <a href="https://stackoverflow.com/questions/26347271/inner-padding-for-column-layout">this similar question</a> might help—by adding an internal <code>padding-right</code> to all direct children of the <code>.document-flow</code>. I'd rather not do this because the end-of-page spacing could be no greater than the gaps between columns (since the padding would apply in the middle columns as well).</p>