Растянуть блок на всю высоту родителя

Как растянуть блок main__container на всю высоту родителя main, чтобы сетка grid заполнила весь main?

HTML

<div class="wrapper">
        <header class="header">
            <div class="header__container"></div>
        </header>
        
        
        <main class="main">
            <div class="main__container">
                <div class="main__card big">
                    <p>
                    text1
                    </p>
                </div>
                
                <div class="main__card">
                    <p>
                    text1
                    </p>
                </div>
                
                <div class="main__card">
                    <p>
                    text1
                    </p>
                </div>
                
                <div class="main__card">
                    <p>
                    text1
                    </p>
                </div>
                
                
            </div>
        </main>
        
        
        <footer class="footer">
            <div class="footer__container"></div>
        </footer>
    </div>

CSS

.wrapper {
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.header {
    height: 70px;
    background: grey;
}

.main {
    flex: 1 1 auto;
    padding: 15px 0;
}

.main__container {
    height: 100%;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(2, 1fr);
}

.big {
    grid-row: span 3;
    background: red;
}

.footer {
    min-height: 70px;
    background: grey;
}

[class*="__container"] {
    max-width: 1230px;
    padding: 0 15px;
    margin: auto;
}