css - 父容器不溢出的动态高度DIV

Question

我想在另一个包装器中有一个动态高度 div，它始终填充父容器，并通过显示垂直滚动条自动缩小其大小，以便用户在发生溢出时滚动。

下图是我所期待的:

目前，内容 Pane 只是溢出了包装器，并将页脚 Pane 也推到了看不见的地方。

在这里 fiddle 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 来完成。

FIDDLE

(相关)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(?) here ，在容器元素上放置 height:0 会触发垂直滚动条。 (这里我同时使用了高度和最小高度，因为这个 hack 只在 firefox 中使用最小高度有效)

3) 为了在 Firefox < 22 中工作 - 你需要启用 flexbox 运行时标志，如 this

4) 现代浏览器对 flexbox 的支持出奇地好(参见 here )，但您需要添加一些浏览器特定的 css 才能使其正常工作(参见上面的 fiddle )