如何让div填满剩下的所有地方？

<style>
    .container {
        display: flex;
        height: 300px;
    }
    .fill-div {
        flex-grow: 1;
        background-color: #ccc;
    }
</style>

<div class="container">
    <div>Content 1</div>
    <div class="fill-div">Fill Div</div>
</div>

<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        height: 300px;
    }
    .fill-div {
        background-color: #ccc;
    }
</style>

<div class="container">
    <div>Content 1</div>
    <div class="fill-div">Fill Div</div>
</div>