父div设置overflow-y：auto的属性，在它里面的div的box-shadow属性左右两边显示不出来

Question

关于css样式的问题，父div设置overflow-y：auto的属性，在它里面的div的box-shadow属性左右两边显示不出来
代码如下：

<div id="box">
    <div class="test">    
        1975年二、三月间，一个平平常常的日子，细蒙蒙的雨丝夹着一星半点的雪花，正纷纷淋淋地向大地飘洒着。时令已快到惊蛰，雪当然再不会存留，往往还没等落地，就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去，但那真正温暖的春天还远远地没有到来。        
    </div>
</div>

#box{
    margin: 50px;
    overflow-y: auto;
}
.test{
    margin-top: 1px;
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.12), 
                0px 1px 1px 0px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

Answer 1

.test {
    margin: 1px 1px 2px;
    ...
}

Answer 2

给父元素设置box-shadow偏移大小的padding

Answer 3

以前没有遇到过这个问题，我实验了一下，觉得原因应该是:

1. 父级容器上设置overflow、overflow-y和overflow-x属性不为visible时，会触发一次容器宽高计算并裁剪
2. box-shadow属性不会影响元素的宽高，所以被overflow忽略，然后裁剪
3. 由于设置了overflow，父级元素触发BFC，没有上外边距合并，所以能够显示上边的box-shadow

事实上，overflow不为visible与触发BFC的条件很像，但不清楚是不是BFC的原因。

以上都是在chrome浏览器中发现的情况，因此可以试试上面两位的解决方法。

但是

但是，如果你是在IE9浏览器中，那么仅仅是1px的margin是没有办法完整显示box-shadow的，至少得是2px。