Почему слайдеры Javascript нарушают мой гибкий макет css?
Я изучаю CSS Flexbox, и у меня есть одна проблема со слайдерами javascript. Я тестировал несколько (lightgallery.js, swiper.js, siema.js), но каждый раз, кажется, ломается мой контейнер flexbox.
У меня есть главный элемент и побочный элемент. На мобильных устройствах я бы хотел, чтобы основные и второстепенные элементы располагались один под другим. Вроде хорошо работает. Но на рабочем столе я бы хотел, чтобы основной элемент умещался на 2/3 от максимальных 1000 пикселей, а боковой элемент - на 1/3, бок о бок.
К сожалению, слайдер, кажется, сломал мой контейнер .wrap. Я много чего тестировал и искал проблемы, подобные моей, но безрезультатно. Я не очень понимаю, что могло бы решить мою проблему. Должен признаться, я немного заблудился.
Вы можете увидеть эту проблему на этой ручке (lightgallery.js): https://codepen.io/studiok7/pen/pxGWMJ
<span>Thanks ;-)</span>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
По умолчанию для гибких элементов (дочерних элементов гибкого макета) min-width установлено значение auto, чтобы родительский элемент отображал все элементы без обрезки / переполнения. Попробуйте добавить:
.main {
...
min-width: 0;
}
в элемент .main, как показано в разветвленном примере ниже: https://codepen.io/anon/pen/vVPLOo
Спасибо @ Piotr-Wicijowski! На самом деле это так просто! Мне просто нужно продолжать учиться. Спасибо еще раз !
Ты спас мне целый час моей жизни
также происходит со swiper JS - большое спасибо
Вы можете использовать что-то вроде: flex-base: calc (100% / 3 * 2);