Html 允许绝对容器宽度溢出屏幕宽度

我有一个绝对位于屏幕右下方的容器

宽度

和

高度

设置为自动

容器内部是元素，这些元素被设置为

内联块

。想象一下facebook的聊天窗口会弹出，这正是我所拥有的

当我添加元素时，这些元素按预期工作，在屏幕右侧彼此相邻显示。问题是，当我添加了足够多的内容，容器达到屏幕的宽度时，它们会被包装起来。而不是继续离开屏幕

我怎样才能做到这一点

<div class='container'>
    <div class='element'></div> 
    <!-- Adding too many of these will cause them to wrap
     above each other instead of flowing off the left side of the screen --> 
</div>

.container{
    position: absolute;
    right: 0:
    bottom: 0;
    width: auto;
    height: auto;
}

.element{
    width: 300px;
    height: 500px;
}

.集装箱{
位置：绝对位置；
右：0:
底部：0；
宽度：自动；
高度：自动；
}
.元素{
宽度：300px；
高度：500px；
}

这个想法是让您的

元素

s

内联块

，然后使用

空白：nowrap

属性将它们强制成一行-请参见下面的演示：

.container{
位置：绝对位置；
右：0；
底部：0；
宽度：自动；
高度：自动；
空白：nowrap；
}
.元素{
宽度：300px；
高度：500px；
显示：内联块；
边框：1px纯红；
}

要素1
要素2
要素3
要素4
Flexbox的一个很好的属性：使用
flex wrap:nowrap
（这是默认值）：flex容器将不允许其flex项占用2+行，并将强制其溢出容器，即使其宽度之和远大于其父项。

要从右到左显示它们，在左侧的视口之外，只需使用
柔性方向：行反转


与
内联块相比的优势
：项目之间没有空格/间隙（通常为4px）


.container{
位置：绝对位置；
右：0；
底部：0；
显示器：flex；
弯曲方向：行反向；
宽度：自动；
高度：自动；
}
.元素{
宽度：300px；
高度：200px；
/*flex:0 300px；不需要*/
边框：1px纯红；
}

要素1
要素2
要素3
要素4
“空白：nowrap”。这正是我需要的，谢谢！