html - 浏览器外的 Flexbox

Question

我的网站需要帮助...

大家好，我有一个 Flexbox，不知怎的，这个 flexbox 出现在浏览器之外（见图）。你知道为什么吗？

这 4 个容器应该留在浏览器内而不是离开它......

我想调整大小，以适应浏览器，提前非常感谢

.grid-box{
    display: grid;

    position: fixed;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:

            "box2 box2 box2 box2 "
            "box2 box2 box2 box2 "
            "box2 box2 box2 box2 "
            "box1 box1 box1 box1 "
            "box1 box1 box1 box1 ";
}



.box1 {
    grid-area: box1;
    background-color: #ff7443;

    margin-right: 4%;
    height: 100%;
}


.box2 {
    grid-area: box2;
    background-color: #3fc3ee;
   margin-top: 10%;
    float: left;
    height: 100%;
    width: 100%%;
}

@media screen and (min-width:736px) {
    .grid-box {
        display: grid;
        flex: 1;
        flex-basis: content;
        flex-wrap: nowrap;
        justify-content: space-around;
        position: fixed;
        width: 100%;
        height: 100%;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:

                "box1 box2 box2 box2 "
                "box1 box2 box2 box2 "
                "box1 box2 box2 box2 "
                "box1 box2 box2 box2 ";
    }


    .box1 {
        grid-area: box1;
        background-color: #ff7443;
        margin-top: 30%;
        margin-right: 4%;
        height: 100%;
    }

}

<div class="grid-box">

    <div class="box1">
     

    </div>

    <div class="box2">

    </div>

标签： htmlcssflexbox