在带有水平滚动的可变宽度div中显示内联块元素

Question

我有以下布局：

https://jsfiddle.net/0r6cdwht/2/

如果div中显示的项目溢出，如何在这种特殊情况下实现水平滚动？

我调查了这个，我找到的一个答案是使用

white-space: nowrap;

在容器div上，但在我的情况下，这将滚动所有页面。

Answer 1

由于您将元素200px定位在左侧，因此您可以使用calc(100% - 200px)来计算元素的max-width。然后添加overflow: auto和white-space: nowrap以有条件地添加滚动条，具体取决于子项的数量：

Updated Example

.devices {
    max-width: calc(100% - 200px);
    white-space: nowrap;
    overflow: auto;
}

Answer 2

seqNUm将在课堂内奏效。但是在DIV中没有定义的宽度你将看不到它。

这有意义吗？

我添加了overflow：auto;对你的小提琴，但直到我从随机文本中删除空格后它才起作用。