为什么 Javascript 滑块破坏了我的 css 弹性布局？

Question

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

我有一个主要元素和一个辅助元素。在手机上，我希望主要元素和旁边元素可以一个在另一个下面。它似乎运作良好。但是在桌面上，我希望主要元素适合最大 1000px 的 2/3，旁边元素适合 1/3，并排。

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

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

<span>Thanks ;-)</span>

Answer 1

默认情况下，flex 项目（flex 布局的子项）将最小宽度设置为自动，这样父项将显示没有 clipping/overflow 的所有元素。尝试添加：

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

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