如何在HTML中使各部分的高度相同？

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

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

<style>
    table {
        height: 100%;
        width: 100%;
        table-layout: fixed;
    }
    td {
        height: 33.33%;
    }
</style>

<table>
    <tr>
        <td>内容1</td>
    </tr>
    <tr>
        <td>内容2</td>
    </tr>
    <tr>
        <td>内容3</td>
    </tr>
</table>

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

<div class="container">
    <div>内容1</div>
    <div>内容2</div>
    <div>内容3</div>
</div>