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

Question

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

当这个div悬停时，里面的所有内容都应该向下滑动并显示出来。我尝试了许多方法来实现这一点，包括应用top和bottom声明、使用max-height和使用其他方法
注意：里面的内容是未知的/不同高度的

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

以下是我的一个方法的链接：
http://jsfiddle.net/fLuHL/
它向上滑动而不是向下滑动。

Answer 1

我不确定这是否是你想要的，但是。。。更新小提琴这里

我在css中添加了top属性。

Answer 2

由于转换不考虑height=auto，所以我通常使用translateY来实现相同的效果。

这是代码：http://jsfiddle.net/5oL3gf7n/

我只将您代码的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);
}