6

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

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

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

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

<span>Thanks ;-)</span>
4

1 回答 1

15

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

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

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

于 2018-10-27T13:10:12.300 回答