html - 如果大于父级，则使随机高度的垂直 div 可滚动

Question

我正在努力处理这种情况，因为我在一列中有两个 div。

第一个(#first)会很小，但我无法提前知道它的高度。它的内容应该始终显示，没有滚动条。

第二个 (#second) 会很长(实际上，这将是一个表格)。所以我希望它在变得太大时可以滚动。

这两个 div 的容器 (#container) 占据可用高度的 100%，不能再多了。

我不确定我是否需要 flexboxes。如果不将高度设置为 #first，我不确定这种行为是否可行。

HTML:

<div id="container">
  <div id="first">
    Some random stuff (but should be small)<br>
    Like few lines<br>
    No more
  </div>
  <div id="second">
    <div id="content">
      This can be very very<br>
      very very<br>
      very long
    </div>
  </div>
</div>

CSS

#container {
  height: 100%;
  width: 90%;
  margin: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: solid black 1px;
}

#first {
  width: 90%;
  margin: auto;
  background-color: cyan;
}

#second {
  width: 90%;
  margin: auto;
  background-color: pink;
}

#content {
  width: 100%;
  height: 1000px;
}

这jsFiddle会有帮助。

Answer 1

如果添加 flex: 1; overflow: auto #second，它将填充其父级的可用空间，当其内容变得太大时，它将滚动。

为了让这个演示工作，所以 container 上设置的 height: 100% 将从哪里获得它的 100%，我还添加了 height: 100% 到 html 和 body。

堆栈片段

html, body {
  height: 100%;                  /*  added  */
  margin: 0;                     /*  added  */
}
#container {
  height: 100%;
  width: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;
  border: solid black 1px;
  box-sizing: border-box;
}

#first {
  width: 90%;
  margin: auto;
  background-color: cyan;
}

#second {
  width: 90%;
  margin: auto;
  background-color: pink;

  flex: 1;                       /*  added  */
  overflow: auto;                /*  added  */
}

#content {
  width: 100%;
  height: 1000px;
}

<div id="container">
  <div id="first">
    Some random stuff (but should be small)<br>
    Like few lines<br>
    No more
  </div>
  <div id="second">
    <div id="content">
      This can be very very<br>
      very very<br>
      very long
    </div>
  </div>
</div>