Firefox中flex-basis属性失效的图片滑块布局问题求助

针对你遇到的Firefox窗口调整时图片堆叠问题，可尝试以下几种修复方式：

• 强制子项允许收缩
  Firefox中flex子项默认会根据内容最小尺寸限制收缩，导致flex-basis被忽略。给子项添加min-width: 0打破这个限制，同时明确flex-shrink: 1确保允许收缩：

  .slide.posts-3 .wp-block-jn-artist-carousel__post {
    flex-basis: calc(50% - 15px);
    min-width: 0;
    flex-shrink: 1;
    box-sizing: border-box; /* 确保内边距/边框不影响宽度计算 */
  }
  

• 替换calc计算方式，改用容器负边距
  避免calc在窗口 resize 时的精度问题，通过父容器负边距抵消子项的右侧间距，简化宽度计算：

  .slide.posts-3 {
    display: flex;
    flex-wrap: wrap;
    margin-right: -30px; /* 抵消子项的右侧间距 */
  }
  .slide.posts-3 .wp-block-jn-artist-carousel__post {
    flex-basis: 50%;
    margin-right: 30px;
    min-width: 0;
    box-sizing: border-box;
  }
  

• 全局设置盒模型
  确保所有元素都使用border-box盒模型，避免内边距或边框导致宽度溢出：

  * {
    box-sizing: border-box;
  }
  

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