Javascript 如何避免在使用flex时移出项目

我正在开发react web应用程序，它的样式较少，而isXL是 如果为true，则左右包裹的宽度设置为特定宽度 百分比，而isXL为false，则屏幕上只显示2列 屏幕（此逻辑已使用isXL状态实现），带有 中心包裹始终出现。但当isXL:false时，则为内容 右边的包裹正在向外移动。下面是代码，需要知道怎么可以 我创建horizontall卷轴，这样当 isXL:false，没有任何项目重叠/移出

---

（你能改掉错误使用引号格式的习惯吗？这是为了当你真正引用某人或某事时，而不仅仅是为了让你的问题“看起来更有趣”，吸引注意力。）

<div className={styles.Home__wrapper}>
      <div className={classNames({
               [`${styles.Home_leftWrap_xl}`]: isXL,
               [`${styles.Home_leftWrap_l}`]: !isXL,
   })}> .... </div>
      <div className={styles.Home__centerWrap}> .... </div>
      <div className={classNames({
               [`${styles.Home_rightWrap_xl}`]: isXL,
               [`${styles.Home_rightWrap_l}`]: !isXL,
   })}> .... </div>

.Home {
 &__wrapper {
  display : flex;
  flex-wrap: nowrap;
  width : 100%;
  box-sizing: border-box;
 }

 &__leftWrap {
  &_xl {
  width : 25%;
  }
   &_l {
   width : 33%;
  }
 }
 &__rightWrap {
   &_xl {
   width : 33%;
  }
   &_l {
  width : 40%;
  }
 }
 &__centerWrap {
  flex : 1;
 }
}