Menu
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>
936
If you are using flexbox and want the content to wrap, you must specify flex-wrap: wrap . By default flex items don't wrap. To have the images be three-across, you should specify flex-basis: 33.33333% .
The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container. Note: If the element is not a flexible item, the flex-grow property has no effect. Show demo ❯ Default value: 0.
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines.
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
79
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
