如何阻止父div的阴影溢出？

Question

可以在父div边界之外看到子div的阴影。有没有办法阻止这个阴影？与孩子的div相同。

这只是我页面的一个简单模板，当页面运行时我将无法控制div的位置和数量，所以我需要一个通用的css /方法，其中子项div的阴影不要重叠，当他们在角落时，他们不会溢出父母。

<div style="width:600px; height:700px; margin-left:auto; margin-right:auto; background: #eaeaea;">
    <div style="height:50px;width:50px; background:#ff0000; box-shadow: #000 0px 0px 3px;"></div>
    <div style="height:50px;width:50px; background:#ff0000; box-shadow: #000 0px 0px 3px;"></div>
</div>

Answer 1

将overflow:hidden添加到父div。

JSFiddle Link

Answer 2

将overflow:hidden添加到您的父div。

Demo here