0

I want to render 2 column on a site. I have managed to set this up with a flexbox system. The issue I have is that not all the elements are equal height, and this causes some huge whitespaces. Ideally I would like to have the left column to ignore these whitespaces and move them up a bit. Here you can find the code of how it looks like now:

.flex-wrapper {
            display: flex;
            flex-wrap: wrap;
        }

        .wide {
            width: 75%;
            height: 100px;
            margin-bottom: 10px;
        }

        .small {
            width: 25%;
            height: 150px;
        }

        .red {
            background-color: tomato;
            height: 100%;
        }

        .blue {
            background-color: royalblue;
            height: 100%;
        }

        .flex-wrapper > block-action:nth-of-type(1) {
            order: 1;
        }

        .flex-wrapper > block-action:nth-of-type(2) {
            order: 5;
        }

        .flex-wrapper > block-action:nth-of-type(3) {
            order: 9;
        }

        .flex-wrapper > block-action:nth-of-type(4) {
            order: 13;
        }
<div class="flex-wrapper">
        <div class="wide" style="order: 0">
            <div class="red"></div>
        </div>
        <div class="wide" style="order: 2">
            <div class="red"></div>
        </div>
        <div class="wide" style="order: 4">
            <div class="red"></div>
        </div>
        <div class="wide" style="order: 6">
            <div class="red"></div>
        </div>
        <div class="wide" style="order: 8">
            <div class="red"></div>
        </div>
        <div class="wide" style="order: 10">
            <div class="red"></div>
        </div>
        <div class="wide" style="order: 12">
            <div class="red"></div>
        </div>
        <div class="wide" style="order: 14">
            <div class="red"></div>
        </div>
        <block-action class="small">
            <div class="blue"></div>
        </block-action>
        <block-action class="small">
            <div class="blue"></div>
        </block-action>
        <block-action class="small">
            <div class="blue"></div>
        </block-action>


    </div>

The image below should give you an idea of what I actually want.

my needs

I've founds way to do this with a flexbox, but they always set the order property. This is an issue for me however because the order is already set dynamically by some JS code, so it would overwrite that and break stuff.

user2657943
  • 2,598
  • 5
  • 27
  • 49
  • @Paulie_D it's not a duplicate. What you marked doesn't use flexbox as an answer but a css grid – user2657943 Jul 08 '19 at 14:57
  • It most certainly IS a duplicate whether using flexbox or CSS-Grid. I suggest you re-read the answers there. – Paulie_D Jul 08 '19 at 14:59
  • @Paulie_D No it's not. They give 2 answers. One is with using a CSS Grid, which is something that I'm not using because I work with a flexbox. And the other one is using a Flexbox but manually reshuffling the order, which is something that I cant use either. I suggest you actually read my question before flagging it as a duplicate – user2657943 Jul 09 '19 at 06:55
  • The point the duplicate makes is that there is NO flexbox solution or frankly a CSS-GrId one witthout adding specific parameters which, apparently do not apply here. – Paulie_D Jul 09 '19 at 08:06
  • Then it's not a duplicate, there just isn't an answer – user2657943 Jul 09 '19 at 08:12
  • The "answer" is that there is no answer...except Javascript at also mentioned. Hence this remains a duplicate. – Paulie_D Jul 09 '19 at 08:23
  • The Javascript mentioned is for CSS Grid. I am using Flexbox, so that solution doesn't work – user2657943 Jul 09 '19 at 08:25

0 Answers0