Block with overflow:auto out of parent inline-block

Question

http://jsfiddle.net/k88bqjnj/7/

我在试着做一个弹出窗口。Css：

.c1{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.7);
z-index: 1003;
text-align: center;
padding-top: 49px;
}
.c2{
    display: inline-block;
background: #e9e9e9;
box-shadow: 2px 2px 2px #000;
margin: auto;
padding: 20px;
max-height: 80%;
max-width: 90%;
}
.c3{
    overflow: auto;
}

Html：

<div class="c1">
    <div class="c2">
        <div>header</div>
        <div class="c3">
            *long text*
        </div>
    </div>
</div>

问题是，当我想要c3块到达c2的底部边界并变为可滚动时，它就会从c2中消失。

我需要c2块大小，以取决于浏览器窗口的大小，并保持标题在顶部。最好的解决方案是将最大高度设置为c3块。

Answer 1

在[.c3][1]中添加高度

.c3{
    overflow: auto;
    height:180px;
}

Answer 2

您需要添加

overflow: scroll;

到c2的CSS

fiddle

Answer 3

您需要将overflow: auto属性添加到.c2接口中，并将其添加到兄弟.c3 DEMO中

.c2{
    display: inline-block;
    background: #e9e9e9;
    box-shadow: 2px 2px 2px #000;
    margin: auto;
    padding: 20px;
    max-height: 200px;
    max-width: 90%;
    overflow:auto;  -->> ADDED
}