Question: Is it possible to use flexbox for this kind of patterns(see image attached) like 

```
Box 1 height == (height of box 2 + height of box 3)

```

It is more like foundation equalizer, where change in height variation in either of the three boxes will adjust the boxes height and always look like the image[![enter image description here](https://i.stack.imgur.com/iECai.png)](https://i.stack.imgur.com/iECai.png)

Answer: 
You can basically create a *nested flexbox* - the `box 1` and the `box 2 & 3 wrapper` in a *row* flexbox and `box 2 & 3` in a *column* flexbox.

Note the usage of `flex: 1` specifically - this allows equal heights as you desire.

See demo below:

```css
.wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.wrapper > * {
  flex: 1;
  margin: 5px;
}
.wrapper > .box-wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wrapper > .box-wrap > .box {
  flex:1;
  margin: 5px;
}
.wrapper > .box-wrap > .box:first-child {
  margin-top: 0;
}
.wrapper > .box-wrap > .box:last-child {
  margin-bottom: 0;
}
.box {
  border: 1px solid;
}
```

```html
<div class="wrapper">
  <div class="box">
    Some text here some text here some text here some text here Some text here some text here some text here some text here Some text here some text here some text here some text here Some text here some text here some text here some text here
  </div>
  <div class="box-wrap">
    <div class="box">
      Some text here
    </div>
    <div class="box">
      Some text here
    </div>
  </div>
</div>
```
You can divide this layout in 2 columns and in second columns you can have 2 rows or more if needed.

Following `HTML` structure for this kind of layout:

**HTML:**

```
<div class="row">
  <div class="col box">
      Column one content goes here...
  </div>
  <div class="col right-col">
    <div class="box">
      Box one content goes here...
    </div>
    <div class="box">
      Box two content goes here...
    </div>
  </div>
</div>

```

**Necessary CSS:**

```
.row {
  display: flex;
}

.col {
  flex-basis: 33.33%;
}

.right-col {
  flex-basis: 66.67%;
  flex-direction: column;
  display: flex;
}

```

```css
* {box-sizing: border-box;}

.row {
  display: flex;
}

.col {
  flex-basis: 33.33%;
}

.box {
  border: 3px solid black;
  padding: 10px;
}

.right-col {
  flex-basis: 66.67%;
  flex-direction: column;
  padding-left: 10px;
  display: flex;
}

.right-col .box + .box {
  margin: 10px 0 0;
}
```

```html
<div class="row">
  <div class="col box">
    Column one content goes here...
  </div>
  <div class="col right-col">
    <div class="box">
      Box one content goes here...
    </div>
    <div class="box">
      Box two content goes here... Loremp ipsum dolor sit amet Loremp ipsum dolor sit amet Loremp ipsum dolor sit amet Loremp ipsum dolor sit amet Loremp ipsum dolor sit amet Loremp ipsum dolor sit amet 
    </div>
  </div>
</div>
```