Flexbox - последний элемент размещения «плавающий» справа

Question

Мне нужно написать некоторый запасной вариант сетки для IE11.

Я хочу, чтобы элемент 4 располагался в правом нижнем углу, чтобы элемент 1 мог растягиваться до самого дна?

Я думаю, что это невозможно с flexbox, верно?: https://jsfiddle.net/b7w0pc4q/4/

<div class="flexContainer">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
</div>

SCSS:

.flexContainer {
  display: flex;
  background-color: #223;
  min-height: 100vh;
  flex-wrap: wrap;
  .item {
    border: solid 1px red;
    padding: 20px;
    &:nth-child(1) {
      width: 50%;
      align-self: stretch;
      background-color: #a69eff;
    }
    &:nth-child(2), &:nth-child(3) {
      width: 25%;
      background-color: #ffb76f;
      align-self: flex-start;
    }
    &:nth-child(4) {
      background-color: #ffee80;
      width: 51%;
      margin-left: auto;
    }
  }
}

С классическим расположением поплавков это довольно просто: https://codepen.io/Sepp/pen/MXBrzy?editors=1100 Но я пока не хочу сдаваться,есть идеи?

Answer 1

Итак, я заключаю: это невозможно с flexbox без изменения разметки html.

Спасибо, ребята.