与flexbox一样漂浮

Question

我想对我的网站做点什么，我有一系列正方形填充一个方向的弹性框，问题是我有第一个方形更像是一个大方形的2个方格我想让广场填满广场右边的剩余空间。

我找到了一种使用网格布局的方法，但它仍然是实验性的，我不能让它们适用于主流浏览器的当前版本;所以我想知道有没有办法用普通的flexbox做到这一点？

这里是jsfiddle https://jsfiddle.net/1dkkjhae/

提前谢谢

    *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: Segoe UI,OpenSans,Noto,Helvetica Neue,Helvetica,Tahoma,Arial,FreeSans,sans-serif;
    }

    h1{
      font-weight: 100;
      border-bottom: 1px grey solid;
      width: 1060px;
      height: 45px;
      margin: 0 10px;
    }

    header{
      display:flex;
      width: 100%;
      height: 110px;
      background: #505050;
    }

    #banniere{
      display:flex;
      margin: auto;
      flex-direction: row;
      width: 1080px;
      height: 110px;
      padding: 5px; 
    }

    #logo{
      width: 100px;
      height: 100px;
      background: #00c308;
      margin: 0px 10px;
      padding: 5px;
      padding-top: 40px;
      color: white;
      font-size: 14px;
      font-weight: 100;
    }

    .boutons{
      margin: 0px 10px;
      width: 100px;
      height: 100px;
      background: #00c308;
      padding: 5px;
      color: white;
      font-size: 14px;
      font-weight: 100;
      background: purple;
    }

    #user{
      display: flex;
      align-self: baseline;
      width: 150px;
      height: 75px;
      background: #00c308;
    }

    nav{
      display: flex;
      justify-content: center;
      border-top: 1px #D1D1D1 solid;
      position: static;
      width: 100%;
      height: 50px;
      background: #5d5d5d;
      box-shadow: 0px 3px 3px grey;
    }

    #menu{
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      max-width: 1080px;
    }

    nav ul{
      display: flex;
      max-width: 1080px;
      width: 100%;
      height: 49px;
      list-style: none;
    }

    nav ul li{
      display: flex;
      flex-wrap: wrap;
      flex: 1;
      text-align: center;
      background: #5d5d5d;
    }

    nav ul li a{
      box-sizing: content-box;
      padding: 11px 0px;
      width:100%;
      font-family: "Segoe UI","Helvetica Neue" ;
      text-decoration: none;
      color: #EEEEEE;
      font-size: 20px;
      font-weight: 100;
    }

    .sous_menu{
      position: relative;
      display: none;
      width: 100%;
      background: white;
      box-shadow: 0px 0px 10px grey;
      font-size: 14px;
    }

    .sous_menu a{
      color: black;
    }

    .sous_menu a:hover{
      background: #00ce08;
    }

    nav ul li a:hover{
      color: white;
      background: #00c308;
    }

    nav ul li:hover>.sous_menu{
      display: flex;
      flex-direction: column;
    }

    #container{
      display:flex;
      flex-wrap: wrap;
      margin-left: auto;
      margin-right: auto;
      max-width: 1080px;
      width: 100%;
      min-height: 700px;
      justify-content: center;
    }

    #news{
      margin: 10px;
      max-width: 1060px;
      width: 100%;
      height: 300px;
      background: grey;
      box-shadow: 0px 0px 10px grey;
    }

    #articles{
      max-width: 1080px;
      width: 100%;
    }

    .categories{
      display:flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      max-width: 1080px;
      width: 100%;
    }

    .carte{
      position: relative;
      width: 250px;
      height: 250px;
      background: grey;
      margin: 10px;
      box-shadow: 0px 0px 10px grey;
      overflow: hidden;
    }

    .filtres{
      position: relative;
      width: 250px;
      height: 510px;
      background: grey;
      margin: 10px;
      box-shadow: 0px 0px 10px grey;
      overflow: hidden;
    }

    footer{
      bottom: 0px;
      margin-top: 10px;
      height: 100px;
      width: 100%;
      background: #505050;
      align-self: flex-end;
    }