autogrow textarea容器根据textarea大小不调整大小

Question

我有textarea和一个持有该textarea的DIV容器。

<div class="holder">
    <div style="float:left;">
        <img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc6/211204_417552211638405_1828134258_q.jpg">
    </div>
    <div style="float:left;">
        <textarea class="grow" row="5" cols="20"></textarea>
    </div>
</div>

我正在使用自动增长插件。

$(document).ready(function(){
  $(".grow").autogrow();  
});

当textarea根据内容调整大小时，容器div不会相应地扩展。 我试着添加

Height: 100%;

但是这不起作用，我看到它的浮动属性导致问题，但我不知道如何使它与float属性一起工作。

Demo Here

Answer 1

这是因为div中的元素都是浮动的，因此它们不是浏览器计算父级高度的文档流的一部分。快速解决方法是在父容器上设置overflow: hidden。

Example fiddle