CODEWITHSUNDEEP
htmlcsscss-positioncss-transforms
Wyatt
Wyatt

Reputation: 495

Allow absolute container width to overflow screen width

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;
}

Upvotes: 2

Views: 1371

Answers (2)

FelipeAls
FelipeAls

Reputation: 22171

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>

Upvotes: 0

kukkuz
kukkuz

Reputation: 42352

The idea is to make your elements 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 elements 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>

Upvotes: 2

Related Questions