Question

所以我有一个面板，显示来自不同游戏的匹配。我想让比赛水平继续，无论他们是否有空间。匹配基本上看起来像滚动图库中的图像，然后您可以使用水平滚动条来查看它们。但是，它们会转到换行符，然后在3（总共930px宽）之后隐藏。

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

您可以通过将panel设为弹性框来解决此问题。

/* Flexbox-related values */

.panel {
        display:flex;
        flex-direction:row;    
}

.panel .match {
   flex-grow:0;
   flex-shrink:0;
}

http://jsfiddle.net/6LLbsyjv/2/

我在大盒子里面确认这些物品保持在300像素的所需宽度。如果您删除flex-shrink:0，那么这些项目将自动调整为更小，这不是您想要的。

Answer 2

Flexbox很整洁，但浏览器对它的支持仍然有点不稳定。幸运的是，有一种更容易/更好的方式来处理这个问题。您可以通过将white-space:nowrap;添加到您的包装中来获得后续效果，并且不会限制其宽度 - 该属性将阻止匹配突破到新行，无论有多少是。您只想限制面板上的宽度，而不是包装器。

这里是fiddle。

div中的css水平溢出

2 个答案: