Div in sidebar stretches too long with flexbox

Question

I am creating a layout using flexbox. I have multiple boxes on the left of the layout, and multiple boxes in the right sidebar.

With a wide screen, left and right are next to each other. On a mobile screen, left and right should be mixed with each other. This image will make it more clear:

I'm trying to accomplish this with flexbox. The problem I have is with large screens. The R1 box stretches to the bottom of the L1 box. Which you can see here: demo

So in the fiddle, the pink R2 box should move up to just beneath the text of the R1 box. There should be no empty blue space inside the R1 box.

Here's the code:

HTML

<div class="container">
  <div class="header">header</div>
  <div class="content">
    <div class="leftContent1">
        L1
    </div>
    <div class="leftContent2">
        L2
    </div>
    <div class="rightContent1">
        R1
    </div>
    <div class="rightContent2">
        R2
    </div>
  </div>
  <div class="footer">footer</div>  
</div>

CSS

.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    background-color: lightgrey;
    align-items: center;
}

.header {
    background-color: cornflowerblue;
    width: 100%;
    height: 80px;
    margin: 0px;
}
.content {
    background-color: lightgreen;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-flow:row wrap;
    flex-grow: 1;
    align-content: flex-start;
}
.leftContent1 {
    order:1;
    flex:0 1 100%;
    background-color: gold;
}
.leftContent2 {
    order:3;
    flex:0 1 100%;
    background-color: yellow;
}
.rightContent1 {
    order:2;
    flex:0 1 100%;
    background-color: lightblue;
}
.rightContent2 {
    order:4;
    flex:0 1 100%;
    background-color: pink;
}
.footer {
    background-color: cornflowerblue;
    width: 100%;
    height: 85px;
    margin: 0px;
}

@media all and (min-width: 850px) {
    .content {
        width: 800px;
        margin: 0 auto;
    }
    .leftContent1 {
        order:1;
        flex:0 1 600px;
    }
    .leftContent2 {
        order:3;
        flex:0 1 600px;
    }
    .rightContent1 {
        order:2;
        flex:0 1 200px;
    }
    .rightContent2 {
        order:4;
        flex:0 1 200px;
    }
}

Thanks in advance!

I think you will need http://masonry.desandro.com/ for this. — Nenad Vracar, Jun 02 '16 at 11:00
@AkinjideBankole Yeah the R1 blue should end just after the text, like the other boxes. And this way, R2 should move up to just beneath the text of R1. — OsiriX, Jun 02 '16 at 11:01
@NenadVracar I'll look into it, but I prefer a pure html+css solution. — OsiriX, Jun 02 '16 at 11:02
@NenadVracar is correct. This layout would require something like masonry. Here's why: http://stackoverflow.com/a/34481128/3597276 — Michael Benjamin, Jun 02 '16 at 11:37
possible duplicate: http://stackoverflow.com/q/34480760/3597276 — Michael Benjamin, Jun 02 '16 at 11:37

score 0 · Answer 1 · answered Jun 02 '16 at 11:11

Just check if like this....

<style>
.container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    min-height: 100%;
    background-color: lightgrey;
    align-items: center;
}

.header {
    background-color: cornflowerblue;
    width: 100%;
    height: 80px;
    margin: 0px;
}
.content {
    background-color: lightgreen;
    width: 80%;
    margin: 0 auto;
    display: flex;
    flex-flow:row wrap;
    flex-grow: 1;
    align-content: flex-start;
}
.leftContent1 {
    order:1;
    flex:0 1 100%;
    background-color: gold;
}
.leftContent2 {
    order:2;
    flex:0 1 100%;
    background-color: yellow;
}
.rightContent1 {
    order:3;
    flex:0 1 100%;
    background-color: lightblue;
}
.rightContent2 {
    order:4;
    flex:0 1 100%;
    background-color: pink;
}
.footer {
    background-color: cornflowerblue;
    width: 100%;
    height: 85px;
    margin: 0px;
}

@media all and (min-width: 850px) {
    .content {
        width: 800px;
        margin: 0 auto;
    }
    .leftContent1 {
        order:1;
        flex:0 1 600px;
    }
    .leftContent2 {
        order:3;
        flex:0 1 600px;
    }
    .rightContent1 {
        order:2;
        flex:0 1 200px;
    }
    .rightContent2 {
        order:4;
        flex:0 1 200px;
    }
}
</style>

<div class="container">
  <div class="header">header</div>
  <div class="content">
    <div class="leftContent1">
        L1
    </div>
    <div class="leftContent2">
        L2
    </div>
    <div class="rightContent1">
        R1
    </div>
    <div class="rightContent2">
        R2
    </div>
  </div>
  <div class="footer">footer</div>  
</div>

In normal desktop view L1, L2 left side and R1,R2 Right side. In mobile view L1,L2,R1,R2 should come one by one right? like that only the updated code working. — Mani, Jun 02 '16 at 11:17
To be more precise, if you add 2 breaks after the L1 text in html, it should not have any influence on the length of R1. — OsiriX, Jun 02 '16 at 11:18
R1 still streches to the L1 height - which is expected. I think this is only solvable using flex-direction: column; and limiting the container Height. Otherwise you may give align-self: flex-start; to the R1. But still R2't will be aligned with L2. — Ilya Novojilov, Jun 02 '16 at 11:52

Div in sidebar stretches too long with flexbox

1 Answers1