Почему ползунки Javascript нарушают мою разметку css flex? [Дубликат]

Question

Почему ползунки Javascript нарушают мою разметку css flex? [Дубликат]

1

Я изучаю css flexbox, и у меня есть одна проблема с ползунками javascript. Я проверил несколько (lightgallery.js, swiper.js, siema.js), но каждый раз, как кажется, он разбивает мой контейнер flexbox.

У меня есть основной элемент и элемент в стороне. На мобильном телефоне мне хотелось бы, чтобы основные и вспомогательные элементы могли быть под другим. Кажется, это хорошо работает. Но на рабочем столе, я хочу, чтобы главный элемент соответствовал 2/3 от максимального 1000px, а вспомогательный элемент - 1/3, бок о бок.

К сожалению, слайдер, похоже, сломал мой контейнер.wrap. Я тестировал много вещей и искал такие проблемы, как мои, но безрезультатно. Я не совсем понимаю, что может решить мою проблему. Должен признаться, я немного потерян.

Вы можете увидеть эту проблему на этом ручке (lightgallery.js): https://codepen.io/studiok7/pen/pxGWMJ

<span>Thanks ;-)</span>

studiok7 27 окт. 2018, в 15:53

Источник

0

Вы можете использовать что-то вроде: flex-based: calc (100% / 3 * 2);
Goran.it 27 окт. 2018, в 13:04

Теги:

javascript

css

flexbox

swiper

lightgallery

1 ответ

Ещё вопросы

Вы можете использовать что-то вроде: flex-based: calc (100% / 3 * 2);

Piotr Wicijowski · Accepted Answer · 2018-10-27T11-28-00.000Z

По умолчанию элементы flex (дети гибкого макета) имеют минимальную ширину, установленную на auto, так что родитель будет показывать все элементы без обрезки/переполнения. Попробуйте добавить:

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

к элементу.main, как показано в показанном ниже примере: https://codepen.io/anon/pen/vVPLOo

Спасибо @ Петр-Wicijowski! Это так просто на самом деле! Я просто должен продолжать учиться. Еще раз спасибо !