　　-webkit-box布局无法自动适应高度的bug

　　css3的新属性display：-webkit-box带来了前端开发自动适应布局的春天，但是我发现这个布局有个问题，而且这个问题我无法解决；

　　描述：如果flex布局内部某一个元素高度自动填高，把一整个盒子高度顶开，然后再把该元素的高度缩小， flex盒子高度还是原来的高度，高度没有改变，必须手动重绘dom，我勒个亲；

　　DEMO如下：

　　只要拉动textarea右下角的方块，把文本输入框的高度拉高，再拉小，你就会看到 flex布局无法自动适应的bug以及实现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>

　　from==》》http://www.cnblogs.com/diligenceday/ 【博客园】keep real'