Why Javascript sliders break my css flex layout?

Question

i am learning css flexbox and i have one problem with javascript sliders. I have tested several (lightgallery.js, swiper.js, siema.js) but everytime it seems to break my flexbox container.

I have a main element and an aside element. On mobile, i wish that the main and the aside elements could be one below the other. It seems to work well. But on a desktop, i wish that the main element fits 2/3 of the max 1000px and the aside element fits 1/3, side by side.

Unfortunatelly, the slider seems to break my .wrap container. I have tested a lot of things and searched for problems like mine but without result. I don't really understand what could solve my problem. I must admit i'm a bit lost.

You can see this problem on this pen (lightgallery.js) : https://codepen.io/studiok7/pen/pxGWMJ

<span>Thanks ;-)</span>

You can use something like: flex-basis: calc(100% / 3 * 2); – Goran.it Oct 27 '18 at 13:04 — Goran.it, Oct 27 '18 at 13:04
ahh nice. appreciate that you deleted the pen for it ... – idkwhatsgoingon Jul 28 '22 at 13:41 — idkwhatsgoingon, Jul 28 '22 at 13:41

score 25 · Accepted Answer · answered Oct 27 '18 at 13:10

25

By default the flex items (children of flex layout) have the min-width set to auto, so that the parent would show all elements without clipping/overflow. Try adding:

.main {
...
    min-width: 0;
}

to the .main element, as shown in the forked example below: https://codepen.io/anon/pen/vVPLOo

answered Oct 27 '18 at 13:10

Piotr Wicijowski

1,975
9
15

1

Thank you @Piotr-Wicijowski ! It's so simple in fact ! I just have to keep learning. Thanks again ! – studiok7 Oct 27 '18 at 13:20
1

You saved me a complete hour of my life – Ahmed Mahmoud Aug 06 '20 at 13:00
5

also happens with swiper JS - thanks a lot – Matt Dec 02 '20 at 18:02
Thank you very much !! I don't really understand why, as the Swiper is many (block-)elements below the flex item I added this to, but it solves the slides getting initiated way too big (millions of pixels at times). – Tobias K. Nov 11 '21 at 13:08

Why Javascript sliders break my css flex layout?

1 Answers1

Linked