Проблема с переходом CSS между высотой: 100px в auto

Question

A div фиксированной высоты содержит элемент с большим количеством содержимого, чем он может содержать. Если в неактивном состоянии (мышь не витает над ним), этот div будет находиться на высоте 100 пикселей, а нижняя часть содержимого будет видна.

Когда этот div завис, все содержимое внутри должно отклоняться и отображаться. Я пробовал много способов добиться этого, применяя объявления top и bottom, используя max-height и используя другие методы.
NB: Содержание внутри неизвестно/разной высоты

Однако все мои методы до сих пор не увенчались успехом в создании требуемого эффекта.

Вот ссылка на один из моих методов:
http://jsfiddle.net/fLuHL/
Она скользит вверх, а не вниз.

Answer 1

Я не уверен, если это то, что вы после этого, но ... updated fiddle here

Я добавил top свойства в CSS.

Answer 2

Поскольку переходы не учитывают высоту = автоматически, я обычно использую 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); 
}