元素的高度应依赖于其他元素，同时保持最小高度并在 CSS 中显示可选的滚动条

Question

我需要帮助来设计以下设计中的蓝色容器的样式。蓝色容器的最小高度应为 400px，有一个可选的垂直滚动条，如果绿色容器比红色和蓝色容器的总和高，则蓝色容器会自动增长。

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

重要的是，蓝色容器的最小高度应为 400px，并且只能增长以适合绿色容器的高度。如果内部内容本身很高，它不应该增长，但应该只显示滚动条。

如果纯 CSS 无法做到这一点，请告诉我，然后我将尝试使用 JavaScript。但是，我更喜欢 CSS，因为所有三个容器（红色、蓝色、绿色）的内容都是完全可变的并且可以动态更改。

---

我尝试用 grid 和 flex 来实现它，但无法满足我的所有要求。特别是如果蓝色容器中有很多内容，容器本身要么只有 400 像素高，要么是 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>

Answer 1

考虑对左列使用垂直弯曲方向，使得蓝色区域的

flex-basis

为

400px

以满足最小高度规定。如果父级较高，则

flex-grow: 1

会使蓝色区域填充任何额外的空白空间。

由于其父级水平弹性布局的隐式

align-items: stretch

值，父级保持与绿色区域相同的高度。

align-self: start

覆盖

align-items: stretch

元素上的

green

，以便它可以缩小到小于左侧。

.content {
  display: flex;
}

.left {
  display: flex;
  flex-direction: column;
  flex-basis: 33%;
}

.red {
  background-color: lightsalmon;
}

.blue {
  background-color: lightblue;
  flex: 1 0 400px;
  overflow-y: auto;
}

.green {
  background-color: lightgreen;
  aspect-ratio: 2/1;
  flex-basis: 67%;
  align-self: start;
}

<div class="content">
  <div class="left">
    <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>
  <div class="green">image</div>
</div>