Create a layout with two rows with two columns on either side with flexbox

Question

I am trying to create the following layout using HTML and SCSS with flexbox:

I am able to achieve this with the code below, however, to do this I must include a hardcoded height in the wrapper div, otherwise it does not work. I do not want this as the content that will be in 'e2' will vary depending on what people have entered into a form previously, therefore I want it to grow/shrink depending on the content.

HTML

  <div class="wrapper"> 
    <div class="e1">
      e1
    </div>
    <div class="e2">
      e2
    </div>
    <div class="e3">
      e3
    </div>
    <div class="e4">
      e4
    </div>
  </div>

SCSS

.wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    height: 200px; // I don't want this

    .e1, .e2, .e3, .e4 {
        width: 33.33%;
        border: solid 2px black;
    }
    .e1, .e4 {
        height: 100%;
    }
    .e2, .e3 {
        height: 50%;
    }
}

https://jsfiddle.net/ogec7pw3/9/

*Please note I want that all of the elements, e1, e2, e3, e4 are within the same flexbox wrapper, this is because on mobile devices, the layout will be the elements stacked on top of each other, but e1 is between e2 and e2 i.e.

I will just use the flexbox order property for this.

Cheers, Juan

Update, this question is similar to Make a div span two rows in a grid but in this question, they have to use a fixed height on the wrapper div, this is something I want to avoid