how to fix a codeblock group width in wordpress edit

Question

I am new developer to wordpress, so please forgive the basic question.

I have a problem with width of a column group.

I have a 2 column column group. on the left side I have a slide show, and on the right, I have a pair of vertically stacked images. See below:

in the edit page, this looks extremely normal. no problems.

But when I go to preview, the whole thing is pushed extremely right. When looking at the CSS, the width for the column group exceeds 3 million pixels with right justification. I've tried this in both regular Wordpress blocks and with Elementor blocks.

WHere can I fix this?

Thanks!

Answer 1

display grid/flex have some weird problem when using any kind of slider, I noticed it happening with slick and swiper

The solution to it is also a bit weird but simple.

All you have to do is add min-width: 0; to the parent element of the slider and thats it. (if I remember correctly)

If that didn't help its most likely that the min-width: 0; is not in the correct location. Just keep adding it to every above element until it works =].

No idea why that happens but this solution worked for me every time this bug happend.