为什么 Javascript 滑块会破坏我的 css flex 布局？

Question

我正在学习 css flexbox，但我在使用 javascript 滑块时遇到了一个问题。我已经测试了几个（lightgallery.js、swiper.js、siema.js），但每次它似乎都会破坏我的 flexbox 容器。

我有一个 main 元素和一个 side 元素。在移动设备上，我希望主要和次要元素可以一个在另一个之下。它似乎运作良好。但是在桌面上，我希望主要元素适合最大 1000 像素的 2/3，而旁边元素适合 1/3，并排。

不幸的是，滑块似乎破坏了我的 .wrap 容器。我已经测试了很多东西并搜索了像我这样的问题但没有结果。我真的不明白什么可以解决我的问题。我必须承认我有点失落。

你可以在这支笔上看到这个问题（lightgallery.js）：https ://codepen.io/studiok7/pen/pxGWMJ

<span>Thanks ;-)</span>

Answer 1

默认情况下，flex 项（flex 布局的子项）的 min-width 设置为 auto，这样父项将显示所有元素而不会剪切/溢出。尝试添加：

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

到 .main 元素，如下面的分叉示例所示：https ://codepen.io/anon/pen/vVPLOo