Карусель или слайдер в Flexbox?

Question

[Froggyweb]

неожиданно наткнулся на проблему. Не работают карусели Swiper, Slick если родительскому блоку задан display: flex.
Это что глобальная засада флексбокса?

Answer 1

[Юнус Газиев]

Интересно узнать как они не работают?
Есть проблема с расчётами размеров блоков для элементов у которых родитель display:flexbox

Можешь попробовать вот этот CSS-сниппет:

* {
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
}

Он решает проблему криво посчитанных слайдеров, + можно добавить max-width:100% для слайдера или его родителя, и иногда необходимо установить width:100% родителю или слайдеру

Comments

[Froggyweb]

Ну вот и ClearFix для появился :)

[Юнус Газиев]

Froggyweb: Так же может всё поехать если у блока с display:flex есть псевдо-элементы before или after, это к слову о clearfix

[Froggyweb]

Юнус Газиев: Это решается достаточно просто пока не встречал засадных случаев.

с min-width: 0;
min-height: 0;
как-то непонятно. почему вообще работает и почему сваливается фиксированный футер. у звездочки самый низкий вес, но почему-то у класса min-width: 100vh; уже не работает. Ну ладно хоть слайдер очнулся. Хотя в другом месте тот же слайдер работал нормально.

Answer 2

[dom1n1k]

А зачем родительскому блоку говорить flex?