overflow和position:absolute的问题

黑色框是爷爷级;蓝色框是父级;红色是子级;

.list-detail {//爷爷样式 黑框

height:382px;
width:324px;
background:rgba(255, 255, 255, 1);
padding-top:28px;
overflow-y: auto;
overflow-x: hidden;

}
.details {//父级样式 蓝框
position:relative;
float:right;
margin-right:10px;
height:36px;
line-height:36px;
font-size:14px;
color:#ebc52f;

}
.details-box {//子样式 红框
position:absolute;
display:none;
width:415px;
height:300px;
height:auto;
background:#fff;
top:0;
left:0;
border-radius:6px;
padding:20px;
z-index:999999;
-webkit-box-shadow:0 0 10px rgba(215, 214, 214, .7);
-moz-box-shadow:0 0 10px rgba(215, 214, 214, .7);
box-shadow:0 0 10px rgba(215, 214, 214, .7);
}

怎么能让子元素溢出,不被截

也出滚动条不就可以了?