Grid-Template上的CSS样式不会在Overflow上呈现

问题描述

我正在尝试创建一个在div中溢出的网格模板。但是，当我尝试向左滚动时，似乎只在原始框架内渲染了样式。如下面所示，它似乎在26和26之间断开。我将代码发布在了代码笔上：https://codepen.io/RamNLMe/pen/mdPOWNZ。任何帮助将不胜感激。

<div class="grid-content planner-container">

               
                    <div class="planner">

                        <div class="weeks" id="header">

                        </div>

                        <div class="weeks" id="child">
                        </div>

                        <div class="weeks" id="child">

                            <div class="item" style="grid-column: 1 / 30"> Hellow </div>

                        </div>

                        <div class="weeks" id="child">

                            <div class="item" style="grid-column: 25 / 40"> Hellow </div>

                        </div>

                    </div>

            </div>

CSS：

.planner-container {

/* width */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.planner {
    overflow: auto;
    max-width: 80em;



    .weeks {
        display: grid;
        grid-template-columns: repeat(52,50px );
        grid-template-rows: 50px;
        align-items: center;
        width: 100%;

        &:nth-child(odd) {
            background-color: #f5f5f5;
        }

    }

    .item
    {
        background-color: lightgreen;
    }

}
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）