How can I make the flex box work with a vertical flow?

Question

I like to accomplish the following horizontal layout for the web, where the user will use horizontal scrolling instead of vertical scrolling.

The source code looks similar to the following:

<html>
<head><title>Sample</title></head>
<body>
<main>
  <section class="cover"></section>
  <section>
    <h1>Title</h1>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
    </div>
</section>
<section>
   <h2>Page2</h2>
   <img src="someimage.jpg" alt="Some Title">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit laoreet semper ut placerat eros. </p>
</section>
</main>
</body>
</html>

I thought it would be easy by settings main to display : flex, and since I don't know how many columns there will be I will only set section p column-width : 600px. I hoped the container of the section would get as much width as it needed, but it doesn't work. Instead of the container getting larger depending on the vertical flow content, it remains small and because it will get under the 600px there will be only one column and the rest of the content flowing down.

I like the container to user as much columns needed to present the content and it's parent container to grow in width as much is needed to hold the content.

score 1 · Answer 1 · answered Jul 27 '16 at 14:11

You can set fixed height on Flex-container and use flex-direction: column with flex-wrap: wrap

main {
  display: flex;
  height: 400px;
  flex-direction: column;
  flex-wrap: wrap;
}
.content {
  display: flex;
}
.content p {
  flex: 1;
  margin: 20px;
}

<main>
  <section class="cover"></section>
  <section>
    <h1>Title</h1>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat
        massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit
        laoreet semper ut placerat eros.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat
        massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit
        laoreet semper ut placerat eros.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat
        massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit
        laoreet semper ut placerat eros.</p>
    </div>
  </section>
  <section>
    <h2>Page2</h2>
    <div class="content">
      <img src="http://placehold.it/350x350">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc bibendum blandit ex, eget facilisis mauris ullamcorper eget. Aliquam bibendum venenatis augue, eget auctor elit auctor vel. Mauris egestas congue tellus at molestie. Aliquam quis placerat
        massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam eu dignissim ligula. Aliquam erat volutpat. Pellentesque sed ipsum sit amet sem dapibus tincidunt id a neque. Suspendisse at ipsum eu elit
        laoreet semper ut placerat eros.</p>
    </div>
  </section>
</main>

The reason why I haven't marked it as an answer just yet is that I am still researching your proposed answer. It's putting all the paragraphs next to each other, while the desired behaviour is that it should put all the paragraphs under each other until it reaches the bottom and then continues in a new column next to it. But perhaps it's a point in the good direction. — Mark, Jul 28 '16 at 11:01
The problem is you have the CSS column-width which looks ideal, but only looks at the width and tries to auto calculate the columns it needs. However it would be nicer if I could give it column-height and column-width. So it tries to fill the column to the height of column-height using a width of column-width. When it reaches the end it would add another column with the column-width and column-height. — Mark, Jul 28 '16 at 11:29
I also looked at CSS regions, but you have to define them at forehand, but since I don't know the article size at forehand it's useless. — Mark, Jul 28 '16 at 11:29

How can I make the flex box work with a vertical flow?

1 Answers1