不管html中的顺序如何，如何让div子级覆盖剩余空间？

<style>
    .parent {
        position: relative;
        width: 500px;
        height: 300px;
        background-color: lightgray;
    }

    .child {
        position: absolute;
        top: 50px;
        left: 50px;
        right: 50px;
        bottom: 50px;
        background-color: blue;
        z-index: 1;
    }
</style>

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