如何使用动态标题 div 设置内容区域 div 高度

Question

我正在设计一个包含标题和内容区域的容器，如下所示。

  widget control
------------------
| header text    |  <----- header area
------------------
| item1          |
| item2          |  <---- content area
| item3          |
|                |
------------------

我以前使用绝对位置，将上、下、左、右设置为 0 来填充空间和 如果添加了更多项目，则在内容区域中显示滚动条。

但是，当标题文本太长导致 2 行或更多行时，就会出现问题：

 widget control

------------------
| header text    |
| long text here |  <----- header area
------------------
| item1          |
| item2          |  <---- content area
| item3          |
|                |
------------------

现在标题区域变高了，我的绝对定位失败导致内容区域被标题区域重叠。

我在小提琴上设置了简单的例子。此示例不使用绝对位置方法，因此重叠消失了，但随后 由于无法预测标题区域的大小，我有时间弄清楚如何为内容区域设置高度，以便滚动条适合剩余的内容区域。 （小提琴显示滚动条被切断，因为内容区域高度设置为 100%，即控件本身的 100% 高度（即 100px）

http://jsfiddle.net/Lguwvwou/13/

请注意，我正在寻找使用 仅 CSS 和 不允许设置静态内容区域高度（例如 50 像素）的解决方案。原因是这是小部件控件，用户可以设置控件的高度，但他们无法控制设置标题或内容区域的高度。

因此，如果用户为控件设置了 300 像素的高度，那么长的标题文本可能会占用 100 像素。那么内容区域高度的剩余高度为200px。

提前致谢。

Answer 1

我知道如何做到这一点的唯一方法是使用 flexbox：

.container { 
    width: 300px;
    height: 100px;
    border: 1px solid red;
    display: flex;
    flex-direction: column;
}

.head {
    border: 1px solid blue;
    width: 100%;
    flex-shrink: 0;
}

.content {
    border: 1px solid green;
    overflow-x: hidden;
    overflow-y: scroll;
}


<div class='container'>
    <div class='head'> this is head second line asdlkfj aslkf j;alksdj f;laksdjf;laksdjf;laskdf</div>
    <div class='content'>
        <div class='item'>item1</div>
        <div class='item'>item2</div>
        <div class='item'>item3</div>
        <div class='item'>item4</div>
        <div class='item'>item5</div>
        <div class='item'>item6</div>
    </div>
</div>

更新的 JSFiddle：http://jsfiddle.net/Lguwvwou/19/