如何放置两个div并排当拉伸到完整的大小？

<style>
    .container {
        display: flex;
    }

    .item {
        flex: 1;
        width: 0;
        border: 1px solid black;
    }
</style>

<div class="container">
    <div class="item">Div 1</div>
    <div class="item">Div 2</div>
</div>

<style>
    .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .item {
        width: 0;
        border: 1px solid black;
    }
</style>

<div class="container">
    <div class="item">Div 1</div>
    <div class="item">Div 2</div>
</div>