卡片展开后页面顶部区域无法访问的问题求助

各位好，我正在开发一个带有卡片展开/收起交互的页面，目前遇到了一个很棘手的问题：当卡片展开后，页面的顶部区域就变得无法点击访问了，而卡片收起时一切正常。我已经尝试给父元素和卡片容器添加overflow相关的样式，但不管怎么设置都没效果，想请大家帮忙看看问题出在哪？

先贴出相关的核心JSX代码：

<div className="flex flex-col w-4/5 ">
  <button onClick={() => { setiscardopened(!iscardopened); }} className="w-full h-11 mt-3 bg-green-500 rounded-xl cursor-pointer" >
  </button>
  {rndnum ? (
    <div id="card-container" className={ iscardopened ? "flex flex-col justify-center items-center border-2 transition-all duration-500 opacity-100 scale-100 max-h-full h-1/3 overflow-hidden" : "flex flex-col justify-center items-center border-2 transition-all duration-500 opacity-0 scale-95 h-0 overflow-hidden" } >
      <img src={`onlystates/${rndnum[0]}.png`} className="border-2 w-auto h-20" ></img>
      <div className="flex-row flex">
        <InputandList 
          inputref={inputref} 
          setquery={setcardquery} 
          statenames={CardsNames} 
          filterednames={filteredCardNames ? filteredCardNames : [""]} 
          widthofinput={"3/4"} 
          placeholder={ {placeholders}} 
        ></InputandList>
        <button className=" w-4/11 rounded-2xl mt-2 h-11 text-sm border-5 border-gray-800 bg-gray-700 z-50" 
          // onClick={handlesubmit} 
        > 
          GUESS 
        </button>
      </div>
      <CardGuesContainer></CardGuesContainer>
    </div>
  ) : (
    ""
  )}
</div>

问题具体表现： #

• 卡片收起状态：页面完全正常，顶部的所有元素都可以正常点击、交互；
• 卡片展开状态：页面顶部区域直接“失效”，鼠标点上去没有任何反应，完全无法访问；
• 我尝试过给父容器（最外层的flex flex-col w-4/5）和卡片容器card-container添加overflow-hidden、overflow-auto等样式，但都没能解决问题。

我自己的一些猜测，但还没找到解决方案： #

• 会不会是卡片容器的布局导致它的“可点击区域”超出了视觉范围，覆盖了页面顶部？比如h-1/3或者max-h-full的设置有没有问题？
• 过渡动画里的scale-100、opacity-100会不会在渲染时产生了隐藏的元素覆盖？
• 或者是某个子元素（比如那个带z-50的GUESS按钮）的层级问题，间接导致顶部被遮挡？

有没有大佬能给点排查方向或者解决方案？万分感谢！

内容来源于stack exchange