html - 带滚动的两部分 div

Question

我想制作一个简单的两部分 div:

+---------------------+|  title              |+---------------------+|                     ||   content           ||                     |+---------------------+

"Outer" div must have exactly defined dimensions, for example 400x400 pixels."title" part must occupy whatever space needed, it is typically about 5-10 percent of height. The "content" part can have a lot of content and must be scrolled.

I don't want to use any Javascript.

So far I came with this style:

html:

<div class="outer" style="">
  <div class="title">title .... title </div>
  <div class="content"> text text .... text </div>
</div> <!-- outer -->

CSS:

.outer {
    width:400px;
    height:400px;
    position:relative;
    border:solid red 1px;
}
.title {
    position:absolute;
    border-bottom:1px solid black;
    top:0;width:100%;
}
.content {
    position:absolute;
    top:40px; /* the problem */
    bottom:0;
    overflow:auto;
}

问题

我必须手动为“content”div 提供上边框。因此，如果我更改“title”div 的内容，它的高度会发生变化，并且 div 会重叠或不接触。

如何使这些 div 根据各自的内容正确调整大小？

Answer 1

你可以使用 flex box，通过指定 flex-direction 作为 column:

.outer {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  width:400px;
  height:400px;
}

.title {
  border-bottom: 1px solid #000;
}

.content {
  overflow: auto;
}

<div class="outer" style="">
  <div class="title">title ....title </div>
  <div class="content">
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
    text text .... text<br />
  </div>
</div>