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

Question

我正在学习CSS flexbox，并且我对javascript滑块有一个问题。我已经测试了几个（lightgallery.js，swiper.js，siema.js），但是每次似乎都破坏了我的flexbox容器。

我有一个主要要素和一个旁观要素。在移动设备上，我希望主要元素和旁观者可以是一个在另一个之下。看来运作良好。但是在台式机上，我希望主元素适合最大1000px的2/3，而aside元素适合并排1/3。

不幸的是，滑块似乎破坏了我的.wrap容器。 我已经测试了很多东西并寻找了像我这样的问题，但是没有结果。我不太了解如何解决我的问题。我必须承认我有点迷路。

您可以在此笔（lightgallery.js）上看到此问题： https://codepen.io/studiok7/pen/pxGWMJ

<span>Thanks ;-)</span>

Answer 1

默认情况下，弹性项目（弹性布局的子项）的最小宽度设置为自动，因此父项将显示所有元素而不会出现剪切/溢出的情况。尝试添加：

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

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