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

Question

I have a container that is absolutely positioned at the bottom right side of my screen.

The width and height are set to auto.

Inside the container are elements, which are set to inline-block . Imagine facebook's chat windows that popup, that is exactly what I have.

When I add elements, that work as expected, displaying next to each other on the right side of the screen. The issue is that when I add enough, and the container reaches the width of the screen, they wrap. Instead of continuing left outside of the screen.

How can I achieve this?

<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

The idea is to make your element s inline-block and then force them into a single line using the white-space: nowrap property - see demo below:

 .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> 

If you want to set the direction of the element s from right to left, you can use a nice trick using scale transform - see demo below:

 .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

A nice property of Flexbox : with flex-wrap: nowrap (which is the default value): a flex container won't allow its flex items to occupy 2+ lines and will force them to overflow a container even if the sum of their widths is way larger than their parent.
And to display them from right to left, out of the viewport on the left, it's as easy as flex-direction: row-reverse .
Advantage over inline-block : no whitespace/gap between items (generally 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>