填充可用高度，然后在没有更多空间时滚动

Question

我想要一个列中的两个元素 (div)。第一个有固定的高度，第二个我想填充所有剩余的高度。如果第二个元素的内容超出 space 左边，我想滚动它的内容，而不是让第二个元素占用更多 space （这会导致父级滚动）。

Image (current) 例如，"first element" 是这张照片中的搜索栏。固定高度，并保持在顶部。

"second element"是数据table。正如您在底部看到的，table 内容扩展了页面的高度，整个页面变得可滚动。这不是我要找的。

Image (desired) 我希望 table 容器的行为类似于这个红色框。它填充它的剩余高度，当它包含溢出的内容时，我只想滚动该元素。只滚动红框范围内的内容。

类似这样的例子我看过很多，但是都给"second element"指定了高度，哪怕是vh属性。 vh 对我不起作用，因为 100% 不是整个视口。

我一直在使用 flexbox 来尝试实现这一点，我已经接近了，但我只能为 "second element" 指定一个高度，或者让它增长以填充可用space，但超过它，溢出整个容器。

下面的代码非常接近期望的行为，除了当视口变小时，"box 2" 离开屏幕并且整个内容滚动，我希望 "box 2" 中的内容滚动。

  html,
body {
  height: 100%;
}

.container {
  height: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  .box {
    text-align: center;
    color: white;
    font-family: sans-serif;
    font-size: 36px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .box-1 {
    background-color: green;
    height: 60px;
  }
  .box-2 {
    background-color: blue;
    flex: 1;
  }

<div class="container">
  <div class="box box-1">box 1</div>
  <div class="box box-2">box 2</div>
</div>

Answer 1

html,
body {
    height: 100%;
    margin: 0;
}

.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.box {
    text-align: center;
    color: white;
    font-family: sans-serif;
    font-size: 36px;
    padding: 20px;
}

.box-1 {
    background-color: green;
    height: 60px;
}

.box-2 {
    background-color: blue;
    height: 100%;
    overflow: auto;
}

Answer 2

只需在第二个 div 上应用 overflow:auto 并在容器上应用最大高度。

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

.container {
  max-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.box {
  text-align: center;
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  padding: 20px;
  justify-content: center;
}

.box-1 {
  background-color: green;
  height: 60px;
}

.box-2 {
  background-color: blue;
  flex: 1;
  overflow: auto;
}

.expando {
  height: 1000px;
  /* for demo */
}

<div class="container">
  <div class="box box-1">box 1</div>
  <div class="box box-2">box 2
    <div class="expando"></div>
  </div>
</div>

填充可用高度，然后在没有更多空间时滚动

Fill available height, then scroll when no more room

css

flexbox

height

overflow