css grid布局怎么不让子元素撑大父容器？

Question

有如下html结构

<div class="app">
    <div class="container">
        <div class="box">
            <div>1</div>
            // ...假设这里有一百个div
            <div>100</div>
        </div>
        <div></div>
    </div>
</div>

css:

.app{
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-rows: 1fr 10fr;
    gap: 2vh;
}
.container{
    width: 100%;
    height: 100%;
    background-color: aquamarine;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vh;
}
.box{
    overflow:hidden
}

这里的包裹100个div的容器添加overflow并没有生效
请问我要怎么保持grid生成出来的格子宽高，然后对溢出内容进行隐藏处理
(在.container里加overflow:hidden能实现，但这里只是举个例子，真实情况下，包裹100个div的容器可能在container中间)

Answer 1

在container容器和包裹超出格子大小的容器加overflow:hidden就行了。