React中Keen-Slider置于Flex容器时挤压布局问题求助

问题原因 #

你碰到的问题是flex布局默认行为和keen-slider的轨道计算逻辑冲突导致的：

• 外层容器固定宽度600px，内部flex容器里的header设置了min-width:330px，留给slider的可用空间本应是270px左右。
• keen-slider在perView: "auto"模式下，会将所有slide的总宽度（含spacing）赋值给内部的.keen-slider__track元素，这个总宽度远大于slider容器的可用空间。
• flex布局中，子项默认不会主动收缩适配父容器剩余空间，反而会因为内部超大宽度的轨道，挤压header的布局空间（哪怕header有min-width，极端情况还会突破外层600px的限制）。
• 移除header的min-width后，header被挤压到最小宽度，slider获得更多空间，所以布局暂时恢复，但这不是合理的解决方式。

解决方案 #

给slider容器添加两个关键CSS属性即可解决：

.slider {
  position: relative;
  /* 新增以下两行 */
  flex: 1;
  overflow: hidden;
}

• flex:1：让slider容器占据flex容器内header之外的所有剩余空间，固定其可用宽度。
• overflow:hidden：隐藏keen-slider轨道超出slider容器的部分，滑块就能在固定空间内正常滑动，不会挤压布局。

如果需要进一步确保header不被挤压，可以给header添加flex-shrink:0作为双重保障：

.header {
  min-width: 330px;
  flex-shrink: 0;
}

内容的提问来源于stack exchange，提问作者holligans1293