如何将宽度和高度相同的两个<div>放在一起，而无需滚动？

<style>
    .container {
        display: flex;
    }

    .box {
        width: 100px;
        height: 100px;
        background-color: #ccc;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>

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

    .box {
        width: 100px;
        height: 100px;
        background-color: #ccc;
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
</div>