Flexbox-最后一个元素的位置“浮动”在右边

Question

我必须为IE11编写一些网格后备。

我希望将第4项放在右下角，以便使第1项一直延伸到底部？

the quotas & limits page

我认为使用flexbox是不可能的，对吧？ ：

<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://jsfiddle.net/b7w0pc4q/4/但是我还不想放弃。有什么想法吗？

Answer 1

所以我得出结论：在不更改html标记的情况下，flexbox是不可能的。

谢谢大家。