How to make flex items "overflow" into unused areas when using rows

Question

Essentially I just want flex items to fill all content and bud up against each other even crossing up rows.

For example if we have a two column layout:

______   ______
______   ______
______   ______
______   ______

that is created and the first item has a bunch of text stretching the rest of the row to it's height, how can I make the row below fill the missing space on the other items without content?

______   ______
now I 
have                <-- now there is just empty space
content
______   ______
______   ______
______   ______

______   ______
now I    ______
have     ______    <-- I want this to happen
content  ______
______   
______
______

Here is an example incase I'm not making sense: https://jsfiddle.net/67p1guoL/

you might like the idea of, going left->down>right>down . instead of left>right>down — Jovylle, Jun 17 '20 at 04:13
ahaha, instead going by row, do it by column instead. But i tried it. I cant find it to work. ill try other way — Jovylle, Jun 17 '20 at 04:20

Jovylle · Answer 1 · 2020-06-17T05:45:55.130

I tried solving it, and came up only with bootstrap.

<div class="container text-center">
    <div class="row">
      <div class="col-xs-6">
        data<br/>
        data<br/>
        data<br/>
        data<br/>
        data<br/>
        data<br/>
      </div>
      <div class="col-xs-6">data 1</div>
      <div class="col-xs-6">data  2</div>
      <div class="col-xs-6">data  3</div>
      <div class="col-xs-6">data  4</div>
      <div class="col-xs-6">data  5</div>
      <div class="col-xs-6">data  6</div>
      <div class="col-xs-6">data  7</div>
    </div>
</div>

Just make sure they are all in the same ".row" container can you check this link:

http://jsfiddle.net/y7tk1mqx/3/

How to make flex items "overflow" into unused areas when using rows

1 Answers1