元素的高度应取决于其他元素，同时保持最小高度并在 CSS 中显示可选的滚动条-解网

问：

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

如果绿色容器很小（左示例），则蓝色容器应为 400px 高并显示可选的滚动条。
如果绿色容器很高（右例），则蓝色容器应该会增长，因此红色和蓝色容器的总高度与绿色容器相同。如有必要，应显示滚动条。

重要的是，蓝色容器的最小高度应为 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>

CSS 布局 flexbox 滚动条 css-grid

.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>

上一个：VSCode 滚动条提示（上下单行）

下一个：滚动条 - 使其在移动设备 MUI React 中可见

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

Element's height should depend on other element while keeping min-height and show an optional scrollbar in CSS

评论