Html 为什么在Firefox中通过swiper将分页显示在主部分之外？

当我插入一些幻灯片大内容和一些幻灯片短内容时，为什么在Firefox中通过swiper将分页显示在主部分之外，而不是在Firefox中，而不是像chrome这样的其他浏览器中。我会尝试我认为两个引导4列高度在Firefox中不起作用，在chrome浏览器中也很好，请帮助我。谢谢你

看到我的附件图片了Firefox中的问题

发行内容简短的幻灯片：

无问题大内容幻灯片：

var swiper=新的swiper（“.swiper容器”{
幻灯片视图：1，
分页：{
el:“.swiper分页”，
可点击：正确，
},
});
。滑块内容{
背景色：#000；
填充：10%；
颜色：#fff；
}
.滑块内容h1{
边缘底部：30px；
}
.滑块内容页{
字号：18px；
线高：26px；
}

幻灯片01是什么？
Lorem Ipsum只是prin的虚拟文本，基本上保持不变。它在20世纪60年代随着

Letraset表单包含桌面发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

幻灯片02是什么？
同侧视野

Letraset表，包括Lorem Ipsum版本

幻灯片03是什么？
Letraset包含Lorem Ipsum段落的表单，最近使用的桌面发布软件如Aldus PageMaker包括Lorem Ipsum版本

问题在于不同幻灯片上的内容。第一张幻灯片的内容比另外两张多。遵循以下步骤


移除
padding:10%
并将
display:flex
和
align items:center
对齐到
。滑块内容
使用
flex
，可以将内容调整到中心位置
将这些内容包装在
div
将
最小高度
给予
。刷卡器幻灯片


var swiper=新的swiper（“.swiper容器”{
幻灯片视图：1，
分页：{
el:“.swiper分页”，
可点击：正确，
},
});
。滑块内容{
背景色：#000；
/*填充：10%*/
颜色：#fff；
显示：flex；/*已添加*/
对齐项目：居中；
}
.滑块内容h1{
边缘底部：30px；
}
.滑块内容页{
字号：18px；
线高：26px；
}
/*新CSS*/
.滑梯{
最小高度：370px；/*根据您的要求提供*/
}

幻灯片01是什么？
Lorem Ipsum只是prin的虚拟文本，基本上保持不变。它在20世纪60年代随着

Letraset表单包含桌面发布软件，如Aldus PageMaker，包括Lorem Ipsum版本

幻灯片02是什么？
同侧视野

Letraset表，包括Lorem Ipsum版本

幻灯片03是什么？
Letraset包含Lorem Ipsum段落的表单，最近使用的桌面发布软件如Aldus PageMaker包括Lorem Ipsum版本

@Dharmesh