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>
```
Yes, you can do it with Flex. Just place a outer **"DIV"** and provide it property

**HTML:**

```
<div class="row">

 <div class="box-1">
  1
 </div>

 <div class="box-2">
     <div class="box-3">
      2
      </div> 
      <div class="box-4">
       3
      </div> 
 </div>

</div>

```

**CSS:**

```
 .row{
    display:flex;
    width:100%
  }
.box-1,.box-2,.box-3,.box-4{
    float:left;
    width:40%;
    border:1px solid #000;
    margin:3px;
    padding:3px;
 }
.box-3,.box-4{
    width:95%;
 }

```

Keep an extra box to hold box 2 and 3

[**JS Fiddle for you**](https://jsfiddle.net/wikijames/w55kdao0/5/)