Как установить 1 div рядом с 2 родными div внутри div родительского с flex?

Question

Я пытаюсь установить макет следующим образом:

Но с кодом, приведенным ниже, я правильно установил только первые два div, но третий вышел из div.outer. Как правильно установить это с помощью CSS flex? Я сделал это до сих пор с float: left, но я хочу сделать это во flexbox. Если у нас будет больше 3 div.inner, стек должен начинаться слева (если справа больше нет места)

.outer {
   width: 100%;
   border: 2px solid black;
   box-sizing: border-box;
   display: flex;
   flex-wrap: wrap;
   height:500px;
 }

 .inner {
   width: 50%;
   border: 2px solid red;
   box-sizing: border-box;
   
 }

.inner:first-child {
  height:100%
}

.inner:nth-child(n+2) {
  height:50%;  
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

Answer 1

С той же разметкой вы можете добавить margin-left: auto к третьему inner и перевести к вершине, используя transform: translate(-100%) - см. Демонстрацию ниже:

.outer {
  width: 100%;
  border: 2px solid black;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  height: 500px;
}

.inner {
  width: 50%;
  border: 2px solid red;
  box-sizing: border-box;
}

.inner:first-child {
  height: 100%;
}

.inner:nth-child(n+2) {
  height: 50%;
}

.inner:last-child { /* ADDED */
  margin-left: auto;
  transform: translateY(-100%);
}

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

Answer 2

Используйте один и тот же внутренний элемент для левого и правого полей, поскольку их ширина одинакова. Затем поместите еще две внутренности внутрь правой внутренней части, см. Здесь.

    .outer {
           width: 100%;
           border: 2px solid black;
           box-sizing: border-box;
           display: flex;
           flex-wrap: wrap;
           height:500px;
         }
        
         .inner {
           width: 50%;
           border: 1px solid red;
           box-sizing: border-box;
           height: 100%;
         }
        
        .inner-inner {
          width: 100%;
          height: 50%;
          border: 1px solid green;
        }

<div class="outer">
          <div class="inner"></div>
          <div class="inner">
             <div class="inner-inner"></div>
             <div class="inner-inner"></div>
          </div>
    </div>