当高度发生变化时，为什么这不会过渡？

Question

为什么在高度发生变化时不会转换。

<div class="text-container">
    <div class="heading"><p>Foo</p></div>    
    <div class="story"><p>BAR BAR BAR BAR BAR BAR BAR </p></div>  
</div>   

和css：

.text-container {
    position: relative;
    overflow: hidden;
    margin: 10px;
    margin-right: 0;
    max-width: 300px;
    background: red;
    transition: all 0.2s cubic-bezier(0.320, 0.715, 0.470, 0.830);
}

.story {
    display: none;
}

.text-container:hover .story {
    display: initial;
}

小提琴：

https://jsfiddle.net/clankill3r/k00nhsbb/