6

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 only scrolls horizontally. This is easy enough with the CSS columns property. I have some markup like

<div class="document-flow">
  <p>Some text</p>
  <p>A lot more text</p>
  ...
</div>

and CSS

.document-flow {
  box-sizing: border-box;
  padding: 5rem;
  height: 100vh;
  width: 100vw;

  columns: 25rem;
  column-fill: auto;
  column-gap: 3rem;
}

that gives basically the effect I'm looking for. With enough content, I can scroll to the right to see all my columns.

However, 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.

I'd like it to have the same 5rem padding on the right, but I haven't found a way to do it.

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 demo of this layout in CodePen.)

.document-flow::after {
  content: '';
  display: inline-block;
  width: calc(100% + 5rem);
}

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.

I've considered how this similar question might help—by adding an internal padding-right to all direct children of the .document-flow. 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).

TylerH
  • 20,799
  • 66
  • 75
  • 101
Violet
  • 183
  • 2
  • 7
  • Interesting question... why do you want to scroll horizontally anyways? Isn't vertical scroll the preferred method? – Hooman Bahreini Jul 15 '18 at 23:06
  • @Hooman A brief example would be to emulate the experience of reading a book, with short columns that flow logically left-to-right. In lieu of an in-depth exploration of philosophy and art, I would argue that what's "preferred" is always relative to an audience, an application, and a design aesthetic, and I'm exploring how the web can adapt to non-traditional layouts. – Violet Jul 16 '18 at 03:36

1 Answers1

-1

try it: 

.document-flow {
     -webkit-column-count: 5;
     width: 1300px;
     column-rule-style: solid;
     padding: 20px;
     column-gap: 40px;
 }
Pitel
  • 5,334
  • 7
  • 45
  • 72
William
  • 1
  • 1
    Please document the benefits of your solution or complement with an explanation, code only responses are not always clear. – zardilior Oct 30 '19 at 16:14