Tailwind CSS：overflow:auto父容器为最后子元素添加等距底部间距

不需要针对动态内容做特殊判断，Tailwind 提供两种原生适配方案，支持任意动态高度的卡片内容：

• 方案1：给滚动容器添加底部内边距（代码改动最少）
  找到设置了overflow:auto的内容滚动容器（即class带bg-inpay-black-haze-100的div），做两处调整：
  1. 删除该元素上的h-screen类。父级模态框已经设置max-h-[88%]限制最大高度，子元素写h-screen会强制撑满100vh视口高度，导致边距计算异常、底部留白被裁切。
  2. 给该元素添加pb-6类即可。你当前代码里这个元素同时写了px-8和p-6，Tailwind 后声明的类优先级更高，px-8会覆盖p-6的左右内边距，上下1.5rem的内边距会正常生效，滚动到底部时自动留出24px空白，和卡片之间的mb-6间距完全一致。

  注意：你当前代码里外两层容器都加了overflow-auto（外层模态框容器、内层内容区均设置了滚动属性），会触发双滚动条异常，建议去掉外层模态框的overflow-auto，仅保留内层内容区的滚动逻辑即可。

• 方案2：通过子元素选择器自动给最后一个卡片加外边距（无侵入）
  如果不想调整滚动容器的内边距，可以直接给左右两列的卡片父容器加Tailwind任意选择器类，自动为列内最后一个卡片添加底部外边距，不需要修改现有卡片的类名：
  左列容器修改为：

  <div className="h-full w-2/4 [&>*:last-child]:mb-6">
    {/* 原有Payout Request、Sender卡片代码无需改动 */}
  </div>
  

  右列容器修改为：

  <div className="h-full w-2/4 ml-6 [&>*:last-child]:mb-6">
    {/* 原有History、Receiver Bank、Receiver卡片代码无需改动 */}
  </div>
  

  该写法的逻辑是匹配容器下的最后一个直接子元素，自动添加mb-6（24px）底部外边距，无论卡片内容如何动态变化、最后一个卡片是哪个，样式都会自动生效，和现有卡片间的间距完全统一。

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