How to ignore width of container, overflow to right, without breaking page?

user_16426225 0
Viewed 114

I want to be able to have the slider within the container on the left side, but ignore the right width and go full-width without going out of the page(html/body).

I've tried everything, but just not able to fix it.

I have a bootstrap 5 container and I want to have a owl slider inside of it or anything for that matter.

I've tried overflows, white-space, width: 100%;

<div class="container">
<div class="overflow-slider">
    @for ($i = 0; $i < 7; $i++)
    <img src="https://via.placeholder.com/150" class="yeah">
    @endfor
</div>
</div>

.container {
        position: relative;
    }
    .overflow-slider {
        display: flex;
        overflow: auto;
        position: absolute;
        white-space: nowrap;
        width: 100vw;
    }

This is what I want to achieve, without going out of the page, but right now its going all the way to the right and breaking the page.

This is mine

this is how i want it

And this is how I want it

this is how i want it

css
1 Answers

Hope I can help you today, hello and welcome! You're going to need to wrap your images in divs to make the flexbox work properly, like so:

<style>
.container {
    /*
    position: relative;
    */
}
.overflow-slider {
    display: flex;
    /*
    overflow: auto;
    position: absolute;
    white-space: nowrap;
    */
    width: 100%;
}
.overflow-slider div {
    flex:1 1 100%;
}
.overflow-slider img {
    max-width:100%;
}
</style>


<div class="container">
    <div class="overflow-slider">
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
        <div><img src="https://via.placeholder.com/150" class="yeah"></div>
    </div>
</div>

Please let me know how it goes :)

user_84893040
Related