CSS flexbox在宽度低于特定尺寸时按比例设置flex项的高度

我希望在CSS中创建如下布局：

|---------------------------------------------------------------|
|  box1: grow, min=height of content (variable)                 |
|---------------------------------------------------------------|
|  box2: grow between 100px and 300px, when width below 900px,  |
|  proportionally shrink height. I.e. at |  600px, height       |
|  should be 200px etc.                                         |
|---------------------------------------------------------------|
|  box3: grow, min=height of content (variable)                 |
|---------------------------------------------------------------|

我在这里设置了密码笔

它使用的是flexbox，它几乎满足了我的需要，我只是不知道当宽度低于900px时，如何按比例缩小中间的盒子

---

你的任何建议都会很好！如果有更好的方法实现这一点，它肯定不必使用flexbox…谢谢

溢流+vw装置会有帮助吗？此外，您需要mediaquerie将其设置为低于900px的宽度。谢谢！事实上，我认为大众在这里可能会有一些用处。但在你的链接中，我需要中间框（红色）的最大高度为300px。我已经将大众汽车添加到我的原始示例（）中-我认为这已经非常接近了。。。应该能够使用媒体查询的900px限制，如你所说。再次感谢。