我正在尝试向我的卡片对象添加on-hover事件。我希望onhover扩展卡片以显示页脚div。现在它几乎可以正常工作，但card-footer中的内容略微可见。我可以通过添加顶部填充来解决这个问题，但效果仍然不正确。效果更像是一个 uncover 类型，而不是所需的 slide out，我尝试了不同的设置，如;

• 延伸衬垫。
• 使用隐藏和可见的组合

我认为它归结为card-footer没有 * 滑动 * 在card-body div后面。我不完全确定下一步该尝试什么。
配置

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      transitionProperty: {
        width: 'width',
        height: 'height',
        spacing: 'margin, padding',
      },
    },
  },
  plugins: [],
}

密码

<div class="relative flex h-screen flex-col justify-center overflow-hidden bg-gray-50 py-6 sm:py-12">
      <div id="main-feed" class="flex h-full w-full px-2">
        <div id="card-holder" class="flex h-full w-full flex-wrap justify-start gap-2 overflow-y-auto bg-slate-200">
          <div id="card1" class="z-1 group relative mb-2 h-48 w-fit overflow-y-clip rounded-lg bg-slate-500 p-2 pb-2 transition-all duration-500 hover:h-64">
            <div id="card-body" class="relative z-10 mb-auto h-44 flex-col self-start bg-stone-600">
              <div class="flex w-full justify-between gap-2">
                <div>Content 1</div>
                <div>Content 2</div>
              </div>
              <div class="flex w-full">
                <div>Title</div>
              </div>
              <div class="flex w-full justify-between gap-2">
                <div>Content 3</div>
                <div>Content 4</div>
              </div>
            </div>
            <div id="card-footer" class="z-5 relative mb-auto w-full items-center gap-2 self-end truncate pb-5">
              <div class="flex w-full flex-row justify-between">
                <div>Content 3</div>
                <div>Content 4</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Tailwind Play Link
这是一个Similar问题，但整个内容向上移动，而不仅仅是扩展