Javascript 保持2个div 16：9的宽高比，用1个div用flexbox填充空白

This is the desired layout:

我可以用16:9的图像实现固定的长宽比，并将img宽度设置为100%；然而，这样我就失go 了Flexbox的响应性高度zoom ，高度保持不变，只有row1在调整窗口大小时调整其高度.第2行只是溢出，不会zoom 任何高度.为了解决这个问题，我try 在中间引入第三个div，以填补视区高度降低时的剩余空间，这将使Image1和Image2变小，而中间div变宽.

我的问题是:有没有可能用Flexbox来实现这一点，或者我需要使用css grid或js来实现这一点？

Html:

<div id="container">
      <div id="row1">
            <div id="panel1"></div>
            <div id="panel2"></div>
      </div>
      <div id="row2">
            <div id="panel3">
              <img/>
            </div>
            <div id="panel4"></div>
            <div id="panel5">
               <img/>
       </div>
</div>

另请参阅以下内容:

#container {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

#row1 {
    display: flex;
    flex-wrap: wrap;
    flex: 2;
    gap: 7px;
    width: 100%;
    padding: 7px;
}
#row2 {
    display: flex;
    flex-flow: row nowrap;
    flex: 1;
    gap: 7px;
    width: 100%;
    padding: 0 7px 7px 7px;
}

#panel1 {
    background: white;
    flex: 1;
}

#panel2 {
    background: white;
    width: 100px;
}

#panel3 {
    background: white;
    flex: 1;
}

#panel4 {
    background: white;
    flex: 1;
}

#panel5 {
    background: white;
    flex: 1;
}

#image1 {
width: 100%;
}