Flexbox wrap to next line with available space

Question

Using Flexbox I can not seem to make a div wrap to a new line without having it break with previous block content.

I made a codepen to explain:

.container {
  left: 0;
  right: 0;
  margin: auto;
  background-color: grey;
  width: 800px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.lightblue {
  background-color: lightblue;
  width: 300px;
  height: 100px;
  display: block;
}

.lightpink {
  background-color: lightpink;
  width: 300px;
  height: 50px;
}

.red {
  background-color: red;
  width: 300px;
  height: 50px;
}

body {
  margin 0;
  width: 100%;
  height: 100%;
}

<div class="container">

  <div class="lightblue"></div>
  <div class="lightpink"></div>
  <div class="red"></div>
</div>

What I want is for the red block to display inline, to the right of my lightblue block.

Can you tell me how to achieve this effect?

Thanks!

That is not possible with Flexbox and the existing markup. With `flex-direction: column` one can, though that will take fixed heights and inner scrolling. `float` can do this, or with a markup change if to keep Flexbox — Asons, Dec 07 '17 at 13:59

score 0 · Answer 1 · answered Dec 07 '17 at 13:20

.container {
  left: 0;
  right: 0;
  margin: auto;
  background-color: grey;
  width: 800px;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}

.lightblue {
  background-color: lightblue;
  width: 300px;
  height: 100px;
  display: block;
}

.lightpink {
  background-color: lightpink;
  width: 300px;
  height: 50px;
}

.red {
  background-color: red;
  width: 300px;
  height: 50px;
}

body {
   margin 0;
  width: 100%;
  height: 100%;
}

<div class="container">

  <div class="lightblue" ></div>
  <div>
      <div class="lightpink" ></div>
      <div class="red" ></div>
  </div>
</div>

You just wrap .lightpink, .red in div.

score 0 · Answer 2 · answered Dec 07 '17 at 14:55

0

You can achieve this by adding these 3 lines to your container.

  flex-direction: column;
  max-height: 100px;
  align-content: flex-start;

See the fiddle for working example. https://jsfiddle.net/meercha/yn9gtnpc/1/

answered Dec 07 '17 at 14:55

Mircea Tanasa

34
1
3

Flexbox wrap to next line with available space

2 Answers2