没有溢出父容器的动态高度 DIV

Question

我想在另一个包装器内有一个动态高度 div，它总是填充父容器，并自动缩小其大小并显示垂直滚动条供用户在发生溢出时滚动。

下图是我所期待的：

目前，内容窗格只是溢出包装器并将页脚窗格推到视线之外。

在这里小提琴http://jsfiddle.net/WWcAz/1/

#wrapper{
    padding: 10px;   
    vertical-align: middle;
    background-color: cyan;
    min-height: 100px;
    height: 300px;
    max-height: 300px;    
}

#dynamic{
    background-color: green;
    overflow: auto;
    overflow-x: hidden;
    min-height: 40px;
}

这可以用纯 CSS 实现吗？

(** 更新:) 我不想要任何带有我的包装器的滚动条，并且包装器必须是固定大小，希望这很清楚 - 谢谢:)

Answer 1

据我所知，这只能用 Flexbox 来完成。

小提琴

（相关）CSS

#wrapper{
    padding: 10px;   
    vertical-align: middle;
    background-color: cyan;
    min-height: 100px;
    max-height: 300px; 
    -ms-box-orient: vertical;
   display: -ms-flex;
   height: 100%;
   display: -webkit-box;   /* OLD: Safari,  iOS, Android browser, older WebKit browsers.  */
   display: -moz-flex; 
   display: -ms-flexbox;   /* MID: IE 10 */
   display: -webkit-flex;  /* NEW, Chrome 21+ */ 
   display: flex;          /* NEW: Opera 12.1, Firefox 22+ */    

   -ms-flex-direction: column; 
   -webkit-flex-direction: column;
   flex-direction: column;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}
#content
{
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow: auto;
    height:0;
    min-height: 0;
}

有几点需要说明：

0）（编辑：）为了仅在（绿色）内容上滚动，我不得不稍微更改标记以将黄色区域放在标题中。

1) 我只对可滚动内容应用 flex-grow:1 (即 flex: 1 1 auto)；其他项目可以具有固定或动态高度。

2) 我在这里看到了一个 hack(?) ，在容器元素上放置 height:0 会触发垂直滚动条。（这里我同时使用了高度和最小高度，因为这个 hack 只在带有最小高度的 firefox 中有效）

3) 要使其在 Firefox < 22 中工作 - 您需要像这样启用 flexbox 运行时标志

4) 对 flexbox 的支持在现代浏览器中出奇地好（参见此处），但您需要添加一些浏览器特定的 css 才能使其正常工作（参见上面的小提琴）