Shrink grid container to number of rows

I have a flexbox with a grid and a div in it, and I'd like to collapse the grid container's height to the height of the rows, so that the buttons below it are just below the grid items. The number of rows is also dynamic, because I'm using grid-template-columns: repeat(auto-fit, minmax(250px, 1fr). I can set a max-height of the grid items, like in this image, but that only makes the items smaller and doesn't make the grid container any shorter.

I've tried changing the flexbox they're in so the flex-direction is row, and set flex-wrap to wrap, but that causes other problems and overlapping text when the window size changes. Setting the height or max-height of the grid container to fit-content seems to do nothing as well.

Here is what I have:

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Boardgame Database</title>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    aside {
        background-color: red;
        flex: 1;
        min-width: 250px;
    }

    .grid-container {
        flex: 4;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .grid-item {
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 24px;
        text-align: center;
        overflow: hidden;
        min-height: 100px;
    }

    #main-container {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
    }

    #section-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #page-buttons {
        height: 50px;
        text-align: center;
        font-size: 20px;
    }
</style>
</head>

<body>

<div id="main-container">

    <aside class="sidebar">
    </aside>

    <div id="section-container">
        <section class="grid-container">

            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>

        </section>

        <div id="page-buttons">

            <a href="test.html?page=1">first</a>
            <a href="test.html?page=2">prev</a>
            page
            <a href="test.html?page=3">next</a>
            <a href="test.html?page=4">last</a>

        </div>
    </div>
</div>

</body>
</html>

Solution

The style

.grid-container {
      flex: 4; 
}

is equivalent to flex-grow: 4;

so it makes the container grow. Just remove it and it will keep its dimension

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    aside {
        background-color: red;
        flex: 1;
        min-width: 250px;
    }

    .grid-container {
         /* flex: 4;  */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .grid-item {
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 24px;
        text-align: center;
        overflow: hidden;
        min-height: 100px;
    }

    #main-container {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
    }

    #section-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #page-buttons {
        height: 50px;
        text-align: center;
        font-size: 20px;
    }

<body>

<div id="main-container">

    <aside class="sidebar">
    </aside>

    <div id="section-container">
        <section class="grid-container">

            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>

        </section>

        <div id="page-buttons">

            <a href="test.html?page=1">first</a>
            <a href="test.html?page=2">prev</a>
            page
            <a href="test.html?page=3">next</a>
            <a href="test.html?page=4">last</a>

        </div>
    </div>
</div>

</body>