container display:flex overflow slider

[ToledoNicola]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

v.4.1.4

Description

everytime i put the slider inside a div with display flex the slider overflow

Reproduction Link

https://new-academy-f48ae6.webflow.io/test-splide

https://new-academy-f48ae6.webflow.io/formaciones

Steps to Reproduce

Expected Behaviour

I want to insert the slider inside a div with display flex or column and it stays inside and fits width 100%

[arneprescher]

same with display: grid;

Are there any news on that? I love Splide but this behaviour hits me quite often since I'm working with modular layouts in a css grid :D

[webkitvn]

I also encounter the same issue when using grid or flex

[joligoms]

I solved this issue myself by:

• Wrapping the splide in a flexbox div
• Then setting the splide to grow inside this flexbox AND set any arbitrary width value on splide (very important)

<style>
    .container {
        display: flex;
    }

    .splide-flex {
        display: flex;
        flex: 1 1 0%;
    }

    .splide-flex__component {
        flex: 1 1 0%;
        width: 200px; /* arbitrary width, can be anything AFAIK */
    }
</style>

<div class="container">
    <div class="splide-flex">
        <Splide class="splide-flex__component">
            (...)
        </Splide>
    </div>
</div>