子元素绝对定位且高度不固定，父元素如何自适应高度？

Question

子元素div_timeline_words绝对定位，且高度不固定，
由textarea用户输入的内容多少决定高度，
视觉上父元素包裹着子元素，
那么如何让父元素div_card自适应高度？

<div class="div_card div_timeline_units">
    <div class="div_timeline_img">                                    
        <img src="/Public/images/upload_plus.png">        
    </div>
    <div class="div_timeline_words">        
        <textarea name="timeline_text[]" placeholder="输入文字，可以写一写当时的故事或心情（必填）。300字以下。" maxlength="300" class="text_timeline_text" onkeyup="adjust_parents_height(this)"></textarea>
    </div>
    <div class="div_timeline_button">
        <div>上移</div>
        <div>删除</div>
        <div>下移</div>
    </div>
</div>

我目前的思路是用onkeyup事件获取textarea的高度，再去计算并设置div_card的高度。

function adjust_parents_height(text_timeline){
    var height_leatest=$(text_timeline).height()-90; 
    var parent=$(text_timeline).parents(".div_timeline_units");         
    if(height_leatest>0){
        parent.height(134+height_leatest);
    }else{
        parent.height(123);
    }
    console.log(".div_timeline_units height ->"+parent.height());
    safe_str(text_timeline);
}

有没有比这个简单得多的方法？

Answer 1

在父级元素使用display: flex布局，子元素不要设置为绝对定位

Answer 2

在不知道你为什么要用绝对定位之前，只需要将子元素换为relative就行了