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

Question

我有一个容器，它绝对位于屏幕的右下角。

width和height设置为自动。

容器内是元素，这些元素设置为inline-block。想象一下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;
}

Answer 1

这个想法是让你的elementinline-block，然后使用white-space: nowrap属性将它们强制成一行 - 参见下面的演示：

.container{
position: absolute;
right: 0;
bottom: 0;
width: auto;
height: auto;
white-space: nowrap;
}
.element{
width: 300px;
height: 500px;
display: inline-block;
border: 1px solid red;
}

<div class='container'>
<div class='element'>element 1</div> 
<div class='element'>element 2</div> 
<div class='element'>element 3</div> 
<div class='element'>element 4</div> 
</div>

如果你想从右到左设置element的方向，你可以使用一个很好的技巧使用scale transform- 见下面的演示：

.container{
position: absolute;
right: 0;
bottom: 0;
width: auto;
height: auto;
white-space: nowrap;
transform: scaleX(-1);
}
.element{
width: 300px;
height: 500px;
display: inline-block;
border: 1px solid red;
transform: scaleX(-1);
}

<div class='container'>
<div class='element'>element 1</div> 
<div class='element'>element 2</div> 
<div class='element'>element 3</div> 
<div class='element'>element 4</div> 
</div>

Answer 2

Flexbox的一个很好的属性：使用flex-wrap: nowrap(这是默认值(：弹性容器不允许其弹性项目占据 2+ 行，并且会强制它们溢出容器，即使它们的宽度之和远大于它们的父项。
要从右到左显示它们，在左侧的视口之外，就像flex-direction: row-reverse一样简单。
相对于inline-block的优势：项目之间没有空格/间隙(通常为4px(

.container{
position: absolute;
right: 0;
bottom: 0;
display: flex;
flex-direction: row-reverse;
width: auto;
height: auto;
}
.element{
width: 300px;
height: 200px;
/* flex: 0 0 300px; not needed */
border: 1px solid red;
}

<div class='container'>
<div class='element'>element 1</div> 
<div class='element'>element 2</div> 
<div class='element'>element 3</div> 
<div class='element'>element 4</div> 
</div>