CSS Flexbox Layout with two dynamic columns and three items

Question

What I want to do is have two colums: One main column on the left and one column on the right with 2 items in it. The problem is, that the heights of all three items and therefore the entire container vary wildly, which prohibits the layout from wrapping.

I cannot put the right items into one div, because I need to move one of them to the top on mobile (via order).

Basically, I want to achieve the result below, without having to set the container to a fixed height.

.flex {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 800px;
}

.child--main {
  height: 800px;
  width: calc(200% / 3);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: #6b6bef;
  line-height: 800px;
  flex-basis: 100%;
}

.child--video {
  height: 300px;
  width: calc(100% / 3);
  background-color: #f1b36a;
  color: white;
  text-align: center;
  line-height: 300px;
  text-transform: uppercase;
}

.child--sidebar {
  height: 400px;
  width: calc(100% / 3);
  text-align: center;
  line-height: 400px;
  color: #fff;
  background-color: #81ca3a;
  text-transform: uppercase;
}

<div class="flex">
  <div class="child child--main">main</div>
  <div class="child child--video">video</div>
  <div class="child child--sidebar">sidebar</div>
</div>

If you can't set a fixed height on the container, and you can't nest the two smaller items a separate container, then flexbox will not work in this case. You'll need another method. See [**this post**](http://stackoverflow.com/q/34480760/3597276). — Michael Benjamin, Apr 26 '17 at 18:24

score 0 · Answer 1 · answered Apr 26 '17 at 18:51

This is an alternative to the flexbox.

Hope this help you.

$(document).ready(function() {
  setInterval(function(){
    if (parseInt($('.child--main').css('height'), 10) == 1000) {
      $('.child--main').animate({'height': '100px'}, 1000);
    } else {
      $('.child--main').animate({'height': '1000px'}, 1000);
    }
    
  }, 2000);
});

.flex {
  /*display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 800px;*/
}

.child--main {
  float:left;
  height: 800px;
  width: calc(200% / 3);
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: #6b6bef;
  line-height: 800px;
  flex-basis: 100%;
}

.child--video {
  float:right;
  height: 300px;
  width: calc(100% / 3);
  background-color: #f1b36a;
  color: white;
  text-align: center;
  line-height: 300px;
  text-transform: uppercase;
}

.child--sidebar {
  float:right;
  clear:right; /* this for a small height body  */
  height: 400px;
  width: calc(100% / 3);
  text-align: center;
  line-height: 400px;
  color: #fff;
  background-color: #81ca3a;
  text-transform: uppercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flex">
  <div class="child child--main">main</div>
  <div class="child child--video">video</div>
  <div class="child child--sidebar">sidebar</div>
</div>

CSS Flexbox Layout with two dynamic columns and three items

1 Answers1