容器缩放方向/空白方向控制求助：绝对定位元素需反向缩放

我遇到了容器缩放方向的问题：有一个absolute定位的元素，内部内容设置了justify-end，希望内容位于容器底部。但窗口缩小时，内容反而向下移动，我需要实现相反的效果——让容器上方的空白收缩，内容随窗口缩小向上移动（参考Netflix的表现）。

const HomePageHero = () => {
  return (
    <div className="debug-red absolute bottom-[35%] top-0 left-0 mx-[58px] flex flex-col justify-end items-center w-[36%] z-50">
      <div className=" block debug ">
        <div id="text" className="flex flex-col gap-[20px]">
          <img src={heroTitle} className="" />
          <p className="text-white font-normal text-[1.2vw]">
            Years after retiring from their formidable ninja lives, a
            dysfunctional family must return to shadowy missions to counteract a
            string of looming threats.
          </p>
        </div>
        <div id="buttons" className="flex gap-4">
          <Button title="Play" icon={PlayIconLarge} bgWhite={true} />
          <Button title="More Info" icon={InfoIconMedium} bgWhite={false} />
        </div>
      </div>
    </div>
  );
};

问题出在当前定位逻辑：top-0 bottom-[35%]会让容器高度随窗口拉伸，底部固定在视口35%位置，导致窗口缩小时内容被向下挤压。要实现目标效果，需要固定内容的底部位置，让顶部自适应窗口高度，调整方式如下：

• 移除top-0，仅用bottom属性固定内容距离父容器底部的位置（比如用固定像素值bottom-[80px]，或百分比bottom-[10%]，根据需求调整）
• 去掉flex flex-col justify-end，因为不需要靠容器底部对齐，直接让内容定位在固定的底部位置即可
• 容器不需要设置高度拉伸，仅通过bottom锚定位置，窗口缩小时内容会自然向上移动

修改后的核心代码示例：

<div className="debug-red absolute bottom-[80px] left-0 mx-[58px] w-[36%] z-50">
  <div className="block debug">
    {/* 内部内容保持原有结构 */}
    <div id="text" className="flex flex-col gap-[20px]">
      <img src={heroTitle} className="" />
      <p className="text-white font-normal text-[1.2vw]">
        Years after retiring from their formidable ninja lives, a
        dysfunctional family must return to shadowy missions to counteract a
        string of looming threats.
      </p>
    </div>
    <div id="buttons" className="flex gap-4">
      <Button title="Play" icon={PlayIconLarge} bgWhite={true} />
      <Button title="More Info" icon={InfoIconMedium} bgWhite={false} />
    </div>
  </div>
</div>

核心原理：
通过bottom属性锚定内容的底部位置，窗口高度变化时，底部位置始终保持与视口底部的固定距离，因此窗口缩小内容会向上移动，完全符合需求。

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