CSS 在 height: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);
}