CSS Grid divs does not respect sizes

I try to put text inside a grid area and this tend to change the size of this one but I tried to force the width then appears an "empty space"

I tried with "width: fit-content;" but it only show this empty space

.wrapper {
    display: grid;
    grid-auto-columns: minmax(200px, auto);
    grid-auto-rows: minmax(200px, auto);
}

.box1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    background-color: red;
    width: fit-content;
}

.box2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    background-color: blue;
}

.box3 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    background-color: green;
}

.text {
    width: 300px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>

    <div class="wrapper">
        <div class="box1">
            <div class="text">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Error distinctio possimus laudantium sequi ad voluptas expedita libero, est ratione! In dolore quas laudantium doloribus quae mollitia nulla unde, reprehenderit magni!
            </div>
        </div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
    
</body>
</html>