CSS Flex item spanning two rows without fixed height

Issue

I am trying to create a flex container layout whereby one of the flex items should span two rows. See image below for a better explanation:

Here is my markup:

<div class="container">
    <div class="item item-1">ITEM 1</div>
    <div class="item item-2">ITEM 2</div>
    <div class="item item-3">ITEM 3</div>
</div>

I cannot seem to achieve this, I have tried using flex-wrap and different combinations of the flex property.

I was able to achieve this by putting ITEM 1 & ITEM 2 in a separate <div>, but this presents a problem on a smaller screen, whereby ITEM 3 needs to appear BETWEEN ITEM 1 & ITEM 2. So I would rather keep the markup as is and use the order property to move things around as necessary.

Solution

You can use display: contents on your extra div to achieve what you want:

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  width: 100%;
}

.holder {
  width: 67%;
}

.item {
  border: 1px solid black;
}

.item-1 {
  margin-bottom: 40px;
}

.item-3 {
  width: 33%;
}

@media screen and (max-width: 700px) {
  .container {
    flex-direction: column;
  }
  .item {
    margin-bottom: 20px;
  }
  .item-1 {
    order: 1;
  }
  .item-2 {
    order: 3;
  }
  .item-3 {
    order: 2;
    width: 100%;
  }
  .holder {
    width: 100%;
    display: contents;
  }
}

<div class="container">
  <div class="holder">
    <div class="item item-1">ITEM 1</div>
    <div class="item item-2">ITEM 2</div>
  </div>
  <div class="item item-3">ITEM 3</div>
</div>

Answered By - Pete