css flex one item on the left and 2 items on the right under each other [duplicate]

问题

This question already has answers here:

Left column and stacked right column using flexbox CSS [duplicate] (2 answers)

Closed 2 years ago.

I have 3 div containers and I want first div container to be on left side and be as large in height as 2 containers on the right side, but the problem is that the containers on right side are not wrapped in one parent container. Basically what I want to do -

Is it even possible to do it without changing html structure? Or only possible solution would be to wrap those 2 elements in one parent container?

Here is my html structure -

<div class="container">
  <div class="block1">text here</div>
  <div class="block2">text here</div>
  <div class="block3">text here</div>
</div>

Thank you for your help!

回答1:

i made with grid

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height:400px;
}

.container div {
  color:#fff;
  text-align:center;
}

.block1 {
  grid-row: 1 / 5;
  grid-column: 1 / 3;
  background:red;
}

.block2 {
  grid-row: 1 / 3;
  grid-column: 3 / 3;
  background:greenyellow;
}

.block3 {
 grid-row: 3 / 5;
  grid-column: 3 / 3;
  background:dodgerblue;
}

<div class="container">
  <div class="block1">text here 1</div>
  <div class="block2">text here 2</div>
  <div class="block3">text here3</div>
</div>

来源：https://stackoverflow.com/questions/53873425/css-flex-one-item-on-the-left-and-2-items-on-the-right-under-each-other