Flexbox cell that spans 2 columns AND 2 rows [duplicate]

Question

I'm wondering if this can be done with just flexbox or if I need to incorporate grid features as well. I'm attempting to have specific cells span multiple rows AND columns. Im my unique case, its just the first box needs to span the same width as the 2 boxes below it and the same height as the two to the right of it.

Heres the codepen with my initial attempt and I understand why its not working. Just wondering if theres a way to get this:

#container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.box {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 31.58585%;
  background-color: #f1f1f1;
  border: 1px solid #aaa;
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: center;
}

.highlight {
  flex-basis: 65.9%;
}

<div id="container">
  <div class="box highlight">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>

Into this:

Answer 1

you need use css grid for this type of layout. it gives better flexibility.

#container{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.box{
  background-color: #f1f1f1;
  border: 1px solid #aaa;
  text-align: center;
}

.highlight{
  grid-column: 1 / 3;
  /* grid-column: span 2; same as above */
  grid-row: 1/3;
}

<div id="container">
  <div class="box highlight">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
</div>