展开展示div：flex

Question

我正在尝试使灵活高度的div展开动画。动画从高度：0px到目标高度。不过，我并不是没有目标身高。所以我刚刚假设了一个接近真实高度的高度。这样看起来效果很差，因为我总是高估或低估身高。

.expandable { 
 
    background-color: red; 
 
    width: 200px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow: hidden; 
 
    animation-name: expand; 
 
    animation-duration: 1s; 
 
    animation-timing-function: ease-out; 
 
} 
 
@keyframes expand { 
 
    from { 
 
    height: 0px 
 
    } 
 
    to { 
 
    height: 100px 
 
    } 
 
}

<div class="expandable"> 
 
    text 
 
    <br />text 
 
    <br/>text 
 
    <br />text 
 
    <br/>text 
 
    <br />text 
 
    <br/>text 
 
</div>

见我的小提琴：https://jsfiddle.net/gh3y1sbf/

什么，我想看到的是，动画是光滑的div的实际目标高度。

任何想法这可能吗？最好不使用JavaScript。另外，我没有使用JQuery。

Answer 1

看到这个：

How can I transition height: 0; to height: auto; using CSS?

动画最大高度，而不是身高！