水平响应滚动条在添加到网站时停止工作，但在独立使用时工作？

Question

在单独试用 Scrollbar-CSS 时，它可以在台式机和手机等设备上正常工作并且响应迅速。但是在网站上插入时会中断，并停止“收缩”？

响应式水平滚动

    <style type="text/css">
        .networksWrapper {
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
        }
        .networksTitle {
            display: inline-block;
        }
        .smallPosterText{
            font-size: 75%;
        }
        .networksObject{
            text-align: center;
        }
        .networksPoster{
            width: 150px;
            height: 225px;
        }
        @media screen and (max-width: 600px) {
            .networksPoster{
                width: 115px;
                height: 160px;
            }
        }
    </style>

HTML

这是响应式 HTML。

<div class="networksWrapper">
<div class="networksTitle networksObject">
...
</div>
</div>

网站响应 CSS

这就是响应式网站布局的全部CSS。

*, *:before, *:after {
box-sizing: border-box;
}
.wrapper {
max-width: 1024px;
display: grid;
grid-gap: 10px;
}
.wrapper > * {
border-radius: 5px;
padding: 12px;
font-size: 95%;
margin-bottom: 10px;
}

@media screen and (min-width: 600px) {
.wrapper {
    margin: 0 auto;
    grid-template-columns: 1fr 3fr;
}
.header, .footer {
    grid-column: 1 / -1;
    clear: both;
}
.sidebar {
    float: left;
    width: 19.1489%;
}
.content {
    float: right;
    width: 79.7872%;
}
}
@supports (display: grid) {
.wrapper > * {
    width: auto;
    margin: 0;
}
}
@media screen and (max-width:600px) {
.footer {
    line-height: 16px;
    text-align: center;
    display: block
}
.footer a:not(a.noDecoration) {
    margin-left: 14px
}
}

页面布局

<header class="header">
...
</header>

<div class="wrapper">

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

<article class="content">
<!-- Responsive Scrollbar Goes Here -->
</article>

<footer class="footer">
...
</footer>

</div>

Answer 1

已找到解决方案，您需要添加以下内容才能使其生效：

grid-template-columns: minmax(0, 1fr);

水平响应滚动条在添加到网站时停止工作，但在独立使用时工作？

Horizontal responsive scrollbar stops working when added to website, but works when used standalone?

css

scrollbar