A flexbox grid of two flex items next to one

Question

I am trying to have one div on the left and two on the right. The bottomright should always be below the topRight div. The topRight is the only div with a variable height.

I am currently trying to achieve this using flexbox als you can see in my code below.

I would like to have some directions.

.wrapper {
  display: flex;
  height: 100px;
}

.left {
  background-color: green
}

.topRight {
  background-color: yellow
}

.bottomright {
  background-color: red
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="topRight">TopRight</div>
  <div class="bottomright">Bottom</div>
  </div

This is easily solved as a dynamic (no fixed height) if you wrap the _right_ div's. Will that be an option? — Asons, Mar 30 '17 at 21:24

Michael Benjamin · Answer 1 · 2017-03-30T21:17:53.883

With a fixed height on the container, as you have in your code, you can use flex-direction: column and flex-wrap: wrap. The fixed height serves as a break point, telling flex items where to wrap.

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

.left {
  flex: 0 0 100%; /* consumes full height of first column; forces siblings to wrap */
  background-color: lightgreen
}

/* variable height div */   
.topRight {
  background-color: yellow
}

.bottomright {
  flex: 1; /* consumes remaining space in column */
  background-color: red
}

<div class="wrapper">
  <div class="left">Left</div>
  <div class="topRight">TopRight<br>variable height</div>
  <div class="bottomright">Bottom</div>
  </div>

score 1 · Answer 2 · answered Mar 30 '17 at 21:12

1

On html put a div with a class called right wrapping both topRight and bottomRight and use this css on css:

.wrapper {
  display: flex;
  height: 100px;
}

.right {
 display: flex-flow;
 }

.left {
     background-color: green
}

.topRight {
 background-color: yellow;
 height: 50px;
}

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

I hope that helps you :)

answered Mar 30 '17 at 21:12

Paulo victor Campelo Selano

11
4

1

You need to read up on flexbox properties...as it is now, this will not work at all – Asons Mar 30 '17 at 21:57

score 1 · Answer 3 · edited Mar 30 '17 at 21:55

For infos

display:grid is made for this .... very soon available for most browsers and yet for a few

A tutorial among others : https://css-tricks.com/snippets/css/complete-guide-grid/

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* any height s */
  background-color: green;
}

.leftspan {
  grid-row: span 2;/* if 2 rows avalaible */
}

.topRight {
  background-color: yellow;
  grid-column: 2 /-1
}

.bottomright {
  background-color: red;
  grid-column: 2 /-1
}

.bottomfull {
  background-color: red;
  grid-column: 1 /-1
}

<div class="wrapper">
  <div class="leftspan">Left spanning 2 rows</div>
  <div class="topRight">Top <br/>Right</div>
  <div class="bottomright">Bottom <br/>Right</div>
  </div>
  <p> or did you mean ?
  <div class="wrapper">
  <div class="left">Left</div>
  <div class="topRight">Top Right</div>
  <div class="bottomfull">Bottom <br/>Right</div>
  </div>

render if your browsers understand grid:

A flexbox grid of two flex items next to one

3 Answers3

Linked