CSS在高度：100px到自动之间转换时出现问题

固定高度的div包含的元素的内容超过了它所能包含的内容。 当处于非活动状态时，鼠标不悬停在其上，此div的高度将为100px，并且内容的底部可见

当这个div悬停时，里面的所有内容都应该向下滑动并显示出来。我尝试了很多方法来实现这一点，应用顶部和底部声明，使用最大高度和其他方法。 注意：内部内容物高度未知/变化

然而，到目前为止，我所有的方法都未能达到所需的效果

以下是我的一种方法的链接：

---

它是向上滑动而不是向下滑动。

我不确定这是否是你想要的，但是

---

我在css中添加了top属性。

因为过渡不考虑height=auto，所以我通常使用translateY来实现相同的效果

代码如下：

我只将代码的CSS更改为：

.post-container {
display: block;
height: auto;
position: relative;
margin-top: 0;
z-index: 496;
transition: transform .5s;
    -moz-transition: transform .5s;
    -webkit-transition: transform .5s;
    -o-transition: transform .5s;
transform: translateY(calc(100px - 100%));
}

.text {                        
background-color: #666 !important;
padding: 20px;
}

.post-container:hover {
transform: translateY(0);
}

---

谢谢你的回复，我一直在寻找类似的东西，但是，里面的内容是未知的/不同的高度，所以我无法指定一个数值，我之前忘了提到这一点。