Div inside div - 如何自动 averflow 到其余的 space？

Question

我有一个 div 容器。我里面有 header div，一个静态内容 div 和一个动态内容 div。我还没有为这些 div 设置高度。

最后一个div包含动态内容，我想设置溢出。问题是我不知道设置最大高度。我想让这个div占容器div的最后space，如果溢出了，我想让这个div有一个滚动（不是所有的容器，只是这个 div).

<div style="height: 400px; width:200px;">
    <div class="header">...</div>
    <div class="some static content">...</div>
    <div class="dynamic content">...</div>
</div>

谢谢！

Answer 1

您可以使用 flex.

下面的演示。

将鼠标悬停在最后一个方框上可以看到它变大并显示滚动条。

.box {
  height:400px;
  width:200px;
  display:flex;
  flex-direction:column;
  border:solid;
  }
.dynamic {
  flex:1;
  overflow:auto;
  background:tomato;
  }
/* demo purpose*/
.dynamic br {
  position:absolute;
  }
.dynamic:hover br {
  position:static;
  }

<div class="box">
    <header>header</header>
    <div>some static content</div>
    <div class="dynamic">dynamic content
  <!-- demo purpose-->
  <br/> <br/> <br/> <br/> <br/> test <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
  <br/> <br/> <br/> <br/> <br/> test <br/> <br/> <br/> <br/> <br/> <br/> <br/> 
  <br/> <br/> <br/> <br/> <br/> test <br/> <br/> <br/> <br/> <br/> <br/> <br/> end</div>
</div>

Div inside div - 如何自动 averflow 到其余的 space？

Div inside div - How to auto averflow to the rest space?

html

css

dynamic

overflow