如何拉伸多个内联块来填满父级的所有空间？

<style>
    .container {
        display: flex;
    }
    .item {
        flex: 1;
        width: 0;
    }
</style>

<div class="container">
    <div class="item">块1</div>
    <div class="item">块2</div>
    <div class="item">块3</div>
</div>

<style>
    .container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    }
    .item {
        grid-column: span 1;
    }
</style>

<div class="container">
    <div class="item">块1</div>
    <div class="item">块2</div>
    <div class="item">块3</div>
</div>