React js中div的CSS padding仅右侧生效左侧不生效如何解决

问题原因 #

这是direction: rtl属性作用于可横向滚动的flex容器时的标准浏览器表现：浏览器计算滚动容器的滚动范围时，不会将行首方向（rtl布局下对应左侧）的内边距纳入滚动区域，因此滚动到最左侧时就会出现左侧padding“失效”的视觉效果。

解决方案 #

将滚动容器和内容承载容器拆分，把padding属性转移到内层的内容flex容器上即可：

{/* 外层仅作为滚动容器 */}
<div
  style={{
    overflowX: "auto",
    width: "100%",
    direction: "rtl",
    background: "#ef394e"
  }}
>
  {/* 内层承载flex布局和padding */}
  <div
    style={{
      display: "flex",
      padding: "1em 0.7em",
      width: "fit-content"
    }}
  >
    {Array.from(Array(10).keys()).map((each, index) => (
      <div
        key={index}
        className="swiper-slide"
        style={{
          background: "white",
          borderRadius: "10px",
          width: "270px",
          margin: "0 .4em"
        }}
      >
        <div style={{ padding: "2em 6em" }}>Hello</div>
      </div>
    ))}
  </div>
</div>

如果不想额外增加DOM节点，也可以给第一个子元素单独设置左侧margin、最后一个子元素单独设置右侧margin来模拟padding效果，只是兼容性和实现稳定性不如拆分层级的方案。

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