文章出處

　　-webkit-box布局無法自動適應高度的bug

　　css3的新屬性display：-webkit-box帶來了前端開發自動適應布局的春天，但是我發現這個布局有個問題，而且這個問題我無法解決；

　　描述：如果flex布局內部某一個元素高度自動填高，把一整個盒子高度頂開，然后再把該元素的高度縮小， flex盒子高度還是原來的高度，高度沒有改變，必須手動重繪dom，我勒個親；

　　DEMO如下：

　　只要拉動textarea右下角的方塊，把文本輸入框的高度拉高，再拉小，你就會看到這個現象

<!DOCTYPE html>
<html>
<head>

</head>
<body>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .flex{
            display:-webkit-box;display:-moz-box;            -webkit-box-orient: horizontal;

            border:1px solid #A7A7A7;
        }
        .flex .left, .flex .right{
            display: -webkit-box;
display:-moz-box;        }

        textarea{
            overflow:hidden;
        }

    </style>
    <script src="http://libs.useso.com/js/jquery/1.8.3/jquery.js"></script>
    <div class="flex">
        <div class="left">
            <textarea >

            </textarea>
        </div>
        <div class="right">
            heheda
        </div>
    </div>
<script>

    function autoHeight(elem) {
        //這個有個要注意的地方就是， 要給height設置為auto；， 然后設置scrollHeight才有效;
        elem.style.height = 'auto';
        elem.scrollTop = 0;
        elem.style.height = elem.scrollHeight + 'px';
    }

    var obj = document.getElementsByTagName("textarea")[0];
    $(obj).on('keyup', function(){
        autoHeight(this);
        /*
        var _this = this;
        setTimeout(function() {
            var temp = $(_this).closest(".flex");
            $(temp).css("display","inline");
            temp.append("<div class='temp'></div>")
            temp.find(".temp").remove();
            $(temp).css("display","-webkit-box");
        },1000)
        */
    });

</script>
</body>
</html>

　　以上DEMO的問題，手動強制刷新DOM才能讓盒子自動適應，但是使用setTimeout無法解決，這個demo在火狐瀏覽器中沒有問題，所以我歸結為chrome的bug；

　　textarea自動適應

　　這是一個讓textarea標簽自動適應內部內容的DEMO，但是有個問題，獲取textarea的value 寫入到div中會出現折行變成空格，如果把textarea的內容放到pre標簽中即可解決“換行變成空格”的問題， DEMO如下：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
    *{
        margin:0;
        padding:0;
    }
    .flex{
        display:-webkit-box;

display:-moz-box;


        -webkit-box-orient: horizontal;
        border:1px solid #A7A7A7;
    }
    .flex .left, .flex .right{
        display: -webkit-box;

display:-moz-box;

    }
    textarea{
        overflow:hidden;
        resize:none;
    }
    .result{
        margin:20px;
        border:1px solid #FBA733;
    }
</style>
<script src="http://libs.useso.com/js/jquery/1.8.3/jquery.js"></script>
<div class="flex">
    <div class="left">
        <textarea >11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
            11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
            11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
            11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</textarea>
    </div>
    <div class="right">
        heheda
    </div>
</div>

<div class="result">

</div>

<pre class="result">

</pre>
<script>
    function autoHeight(elem) {
        //這個有個要注意的地方就是， 要給height設置為auto；， 然后設置scrollHeight才有效;
        elem.style.height = 'auto';
        elem.scrollTop = 0;
        elem.style.height = elem.scrollHeight + 'px';
    };

    var obj = document.getElementsByTagName("textarea")[0];
    $(obj).on('keyup', function(){
        autoHeight(this);
    });
    $(obj).on('input', function() {
        $(".result").html( this.value );
    });
    $(function() {
        $("textarea").keyup();
    });
</script>
</body>
</html>