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

Question

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

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

我曾经使用 position absolute 将 top, bottom, left, right 设置为 0 来填充空间和如果添加了更多元素，则在内容区域显示滚动条。

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

 widget control

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

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

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

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

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

因此，如果用户为控件设置 300px 的高度，那么长的标题文本可能会占用 100px。然后内容区域高度的剩余高度为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/