如何限制长方体阴影扩散不超过父级宽度和高度

<style>
    .parent {
        width: 300px;
        height: 200px;
        background-color: #ccc;
        padding: 20px;
    }

    .child {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        background-color: #fff;
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>