Float an element in a flex based layout

Question

I am trying to position an element below and to the right of two other sibling elements. However I have only found a solution using a float based layout.

Is there a way to make the orange box appear to the right of the red box like the example below? I need to use flexbox without setting a max-height since this is determined by the content.

.wrapper {
display: flex;
max-width: 400px;
height: 100%;
width: 400px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}

.bigbox {
  width: 200px;
  background: red;
}

.smallbox1 {
  width: 200px;
  height: 200px;
  background: green;
}

.smallbox2 {
width: 100px;
  height: 200px;
  background: orange;  
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
<div class="smallbox1"></div>
<div class="smallbox2"></div>
</div>

Answer 1

I'd suggest to use css-grid over flexbox, as we are talking about a 2-dimensional layout (flexbox is great for 1-dimensional layouts).

you only need to change/add 3 lines to your code:

the wrapper needs display:grid and the bigbox needs grid-column: 1 and grid-row: 1 / 3

I've put some extra text in my snippet, to show that this works depending on content.

check below snippet

.wrapper {
  max-width: 400px;
  height: 100%;
  width: 400px;
  background: lightgrey;
  display: grid;
  grid-template-columns: 200px 200px;
  grid-template-rows: 200px 100%;
  grid-auto-flow: column;
}

.bigbox {
  width: 200px;
  background: red;
  grid-column: 1;
  grid-row: 1 / 3;
}

.smallbox1 {
  height: 200px;
  background: green;
}

.smallbox2 {
  background: orange;
}

<div class="wrapper">
  <div class="bigbox">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor
    sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.magna. Nullam sed massa luctus.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
  <div class="smallbox1"></div>
  <div class="smallbox2"></div>
</div>

I found this css-grid cheat-sheet very helpful,

the official docs are here,

browser support here

Answer 2

Hope this is what you're looking for. Group the small box together and set it to flex-diretion: column

.wrapper {
display: flex;
max-width: 300px;
height: 100%;
width: 400px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}
.wrapper-2 {
display: flex;
max-width: 300px;
max-height: 400px;
width: 400px;
flex-direction: column;
flex-wrap: wrap;
background: lightgrey;
}
.column{
  display: flex;
  flex-direction: column;
}
.bigbox {
  width: 200px;
  background: red;
  /*height: 100%; If you don't want the big box to take full height with flex wrap*/
}

.smallbox1,.smallbox2 {
  width: 100px;
  height: 200px;
}

.smallbox1 {
  background: green;
}

.smallbox2 {
  background: orange;  
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
  <div class="column">
    <div class="smallbox1"></div>
    <div class="smallbox2"></div>
  </div>
</div>
<hr/>
<div class="wrapper-2">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
 <div class="smallbox1"></div>
 <div class="smallbox2"></div>
</div>

Answer 3

I made with order

.wrapper {
display: flex;
max-width: 300px;
height: 100%;
width: 300px;
flex-direction: row;
flex-wrap: wrap;
background: lightgrey;
}

.bigbox {
  width: 200px;
  background: red;
  order:1;
}

.smallbox1,.smallbox2 {
  width: 100px;
  height: 200px;
}

.smallbox1 {
  background: green;
  order:3;
  
}

.smallbox2 {
  background: orange;  
  order:2;
}

<div class="wrapper">
<div class="bigbox">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu dui pretium, pellentesque est et, ullamcorper risus. Integer tristique aliquet ipsum, quis tincidunt augue bibendum at. Vestibulum a ultrices magna. Nullam sed massa luctus.
  </div>
<div class="smallbox1"></div>
<div class="smallbox2"></div>
</div>