Flexbox column not wrapping: works in Firefox but not on Webkit

Question

I am trying to get perform a masonry style layout but I need it to populate left to right vs top to bottom and not a "best fit scenario" it has to be sequential. My question is this, I can't figure out why Webkit is not breaking the column. (Untested in IE)

Codepen Link: http://s.codepen.io/yoderman94/debug/RRzjrA

Here is my code:

/*** This doesn't work in Webkit!! ***/
#flex-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
      -ms-flex-flow: column wrap;
          flex-flow: column wrap;
}
#flex-container > :nth-child(1n + 1) {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
#flex-container > :nth-child(2n + 2) {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
#flex-container > :nth-child(-n + 2) {
  page-break-before: always;
  /* CSS 2.1 syntax */
  -webkit-column-break-before: always;
          break-before: always;
  /* New syntax */
}
/*** END: This doesn't work in Webkit!! ***/
.post-left {
  min-height: 200px;
  position: relative;
}
.post-left .text-block-holder {
  position: relative;
  width: 60%;
  left: 0%;
}
.post-left .image-block {
  position: absolute;
  width: 33.33333333%;
  right: 0;
}
.post-right {
  min-height: 200px;
  position: relative;
}
.post-right .text-block-holder {
  position: relative;
  width: 60%;
  left: 0%;
  float: right;
}
.post-right .image-block {
  position: absolute;
  width: 33.33333333%;
  top: 0;
  left: 0;
  right: 0;
}
#flex-container > .post-left:nth-child(4n + 1) .text-block-holder {
  width: 60%;
  left: 40%;
}
#flex-container > .post-left:nth-child(4n + 1) .image-block {
  width: 33.33333333%;
  top: 0;
  left: 0;
}
#flex-container > .post-right:nth-child(4n) .text-block-holder {
  width: 60%;
  left: -40%;
}
#flex-container > .post-right:nth-child(4n) .image-block {
  width: 33.33333333%;
  top: 0;
  left: 66.66666667%;
}
.post-left {
  border: solid 1px red;
}
.post-right {
  border: solid 1px blue;
}
body {
  padding: 50px 0px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
 <div id="flex-container" class="row">
    <div class="post-left col-xs-12 col-sm-6 col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 1
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus voluptatibus quis corporis, in ea dolores, officiis odio beatae quisquam. Explicabo eaque quo consectetur delectus distinctio vero rem ad voluptas ex?</p>
     </div>
    </div>
    <div class="post-right col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 2
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      
     </div>

    </div>
    <div class="post-left col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 3
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ne quos eos temporibus, animi.</p>
     </div>
    </div>
    <div class="post-right col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 4
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum sint commodi eius ad iure est, maiores iusto, facere dolores odit quis distinctio modi cumque, nostrum impedit esse, fugiat? Vel.</p>
     </div>

    </div>
    <div class="post-left col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 5
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ipsum dolor sit amet iusto id assumenda est velit harum esse unde, dolorum a tempore ratione quos eos temporibus, animi.</p>
     </div>
    </div>
    <div class="post-right col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 6
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum sint commodi eius ad iure est, maiores iusto, facere dolores odit quis distinctio modi cumque, nostrum impedit esse, fugiat? Vel.</p>
     </div>

    </div>
    
    <div class="post-left col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 7
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus voluptatibus quis corporis, in ea dolores, officiis odio beatae quisquam. Explicabo eaque quo consectetur delectus distinctio vero rem ad voluptas ex?</p>
     </div>
    </div>
    <div class="post-right col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 8
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum sint commodi impedit esse, fugiat? Vel.</p>
     </div>

    </div>
    <div class="post-left col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 9
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum distinctio amet quia similique consequuntur iusto id assumenda est velit ratione quos eos temporibus, animi.</p>
     </div>
    </div>
    <div class="post-right col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 10
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum impedit esse, fugiat? Vel.</p>
     </div>

    </div>
    <div class="post-left col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 11
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum distinctio amet quia similique consequuntur iusto id  a tempore ratione quos eos temporibus, animi.</p>
     </div>
    </div>
    <div class="post-right col-xs-12 col-sm-6">
     <div class="image-block">
      <img src="http://cubecreativedesign.com/dummyimage/600x600/000/fff.png" alt="" class="img-circle img-responsive" />
     </div>
     <div class="text-block-holder">
      <h3>
      Bog Post Title 12
     </h3>
      <p>Written by Author</p>
      <p>Wednesday, 24 August 2016 07:23</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem illum sint commodi eius ad iure est, maiores iusto,  fugiat? Vel.</p>
     </div>

    </div>
   </div>

</div>

The `page-break` / `break-before` properties currently have partial browser support, at best. Although FF gives you the expected result, Chrome renders those properties differently (or possibly just ignores them). If you remove `page-break-before: always`, both FF and Chrome render the same. http://caniuse.com/#search=page-break — Michael Benjamin, Aug 26 '16 at 15:22
That would make sense. I haven't used the masonry js lib but will it allow you to do what I need it to do? I am not opposed to that method. — Chad J Treadway, Aug 26 '16 at 16:16
I've never use Masonry, but I've read it provides lots of flexibility for building grid-like layouts. This may also shed some light: http://stackoverflow.com/a/34481128/3597276 — Michael Benjamin, Aug 26 '16 at 16:19
Ill do some digging into it! Thanks for the feedback, I don't know why I didn't thing to check that! — Chad J Treadway, Aug 26 '16 at 16:22

Flexbox column not wrapping: works in Firefox but not on Webkit

0 Answers0