我需要帮助的风格在以下设计的蓝色容器。蓝色容器应该有一个400像素的最小高度，一个可选的垂直滚动条和自动增长，如果绿色容器高于红色和蓝色容器的总和。

的数据

• 如果绿色容器很小（左图），蓝色容器应该是400像素高，并显示一个可选的滚动条。
• 如果绿色容器很高（右图），蓝色容器应该变大，因此红色和蓝色容器的组合与绿色容器的高度相同。如果需要，应该显示滚动条。

蓝色容器的最小高度应该是400 px，并且只能增长到适合绿色容器的高度，这一点很重要。如果内部内容本身很高，它不应该增长，但应该只显示滚动条。
如果纯CSS做不到这一点，请告诉我，然后我会尝试用JavaScript。然而，我更喜欢CSS，因为所有三个容器（红色，蓝色，绿色）的内容都是完全可变的，可以动态变化。
我试着用grid和flex实现它，但不能满足我所有的要求。特别是如果蓝色容器中有很多内容，要么容器本身只有400px高，要么是100%高，没有显示任何滚动条。首先，这里有一个你可以使用的模板。即使它正确地增长，它不会将蓝色容器缩小到最小高度，如果你向它添加更多行，它也不会显示可选的滚动条：

<style>
  .content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    grid-template-areas:
    "red green green"
    "blue green green"
  }

  .red {
    grid-area: red;
    background-color: lightsalmon;
  }

  .blue {
    grid-area: blue;
    background-color: lightblue;
    min-height: 400px;
    overflow-y: auto;
  }

  .green {
    grid-area: green;
    background-color: lightgreen;
    aspect-ratio: 2/1;
  }
</style>

<div class="content">
  <div class="red">variable content</div>
  <div class="blue">
    <div>min-height 400px</div>
    <div>auto scrollbar</div>
    <div>auto grow if image is taller</div>
    <div>line</div>
    <div>...</div>
  </div>
  <div class="green">image</div>
</div>

字符串