html - div内的CSS水平溢出

Question

所以我有一个面板，它显示来自不同游戏的比赛。我希望比赛继续水平进行，无论他们是否有空间。这些匹配项基本上看起来像滚动画廊中的图像，然后您可以在其中使用水平滚动条浏览它们。然而，他们换行并在 3(总共 930 像素宽)后隐藏。

HTML/Django:

    <div class="panel">
        <!-- tried adding wrapper here -->
        {% for match in all_matches %}
        <div class="match">{{ match.name }}</div>
        {% endfor %}
    </div>

CSS:

    .panel{
        height:160px;
        width:1000px;
        padding-top:5px;
        overflow-x:scroll;
        overflow-y:hidden;
    }

    .panel .match{
        height:150px;
        background-color:#c8c8c8;
        width:300px;
        margin-left:10px;
        display:inline-block;
    }

    /* Tried adding in wrapper, made no difference */
    .panel .wrapper{
        width:1000px;
        overflow:auto;
    }

我已经尝试了一些小的改变，比如溢出到自动/隐藏/滚动，宽度到最小宽度，显示到内联等等。我相信我要解决的问题是包装器工作，我需要知道所有匹配项的总宽度，以便包装器是它们的组合宽度，但我不知道该怎么做，因为匹配项是在页面加载时从 django 加载的。

我还在 Stack Overflow 上发现了一些与此类似的其他问题，尽管我可能没有正确实现它们，或者它们并不是我所需要的。

Answer 1

Flexbox 很简洁，但浏览器对它的支持仍然有点参差不齐。幸运的是，有一种更简单/更受支持的方法来处理这个问题。您可以通过将 white-space:nowrap; 添加到您的包装器来获得您想要的效果，并且不要限制它的宽度 - 该属性将防止匹配换行，不不管有多少。您只想限制面板的宽度，而不是包装器。

这是一个 fiddle .