Specific layout issue with Flex -- Angular Material -- Angular 2

Question

I'm trying to reproduce this layout with Flex using my Angular2 materialDesign stack.

But the blocks 2 and 3 always go at the bottom of the number 4...

Answer 1

I don't know about the materialdesign syntaxic sugar you use, like fxFlex attributes, but you can check the basics of flex layout below if that help.

html, body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.left {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card {
  flex: 1;
}

.right {
  flex: 1;
}

/* this is for styling only */
.card {
  background: blue;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.right {
  background: green;
  display: flex;
  color: white;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="left">
    <div class="card">1</div>
    <div class="card">2</div>
    <div class="card">3</div>
  </div>
  <div class="right">4</div>
</div>

Answer 2

Yor can enter to this site an look for your problem.

https://tburleson-layouts-demos.firebaseapp.com/#/stackoverflow

The author gave a link of an stack overflow question.

Flex Box out of borders?

Hope it helps.