-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>

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

flex布局无法自动适应的bug以及实现textarea根据内容自适应的更多相关文章

  1. flex 布局占位符

    flex 布局占位符 空 span bug .popover-custom-class .system-guide-container .buttons-box { display: flex; fl ...

  2. IE浏览器下flex布局的bug

    原文地址:gitub上的Flexbugs list,可以看到Flex布局在IE糟糕表现的详细描述. 2. Column flex items set to align-items:center ove ...

  3. 解决flex布局下， elementui table组件不能跟随父组件的宽度而变化的bug

    bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...

  4. flex布局 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题和flex布局的元素会有默认间隙（垂直间隙）

    1 .flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况 实现效果: 解决方案:使用after伪类, 解决最后一排数量不够两端分布的情况.宽度就是每张图片的宽度 .list:after { ...

  5. Flex布局【弹性布局】学习

    先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...

  6. 神奇的Flex 布局

    layout是css中的一个重点.传统的页面布局是盒子模型,依赖 display属性 ,position属性 , float属性.它对于那些特殊布局非常不方便,而且定位用多了会出现挺多的bug. 所以 ...

  7. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  8. flex布局使用方法简要汇总

    近期因为使用inline-block,在项目部署后出现了一点小问题,几番解决未果,遂使用flex布局,于是借此机会对flex布局的用法做一个简要的汇总. 遇到的bug如下: 本想两个div使用inli ...

  9. Flex 布局教程：语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

随机推荐

  1. POJ1742 Coins[多重背包可行性]

    Coins Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 34814   Accepted: 11828 Descripti ...

  2. 多个mysql解决方法

    有的时候工作需要之类的,需要多个mysql数据库,而默认开启的服务为c盘windows里的my.ini 1.设置好要用的my.ini2.关闭当前的mysql数据库服务3.将my.ini拷贝到C:\WI ...

  3. StringBuffer和StringBuilder的区别

    StringBuffer和StringBuilder的区别 StringBuffer与StringBuilder就不一样了,他们是字符串变量,是可改变的对象,每当我们用它们对字符串做操作时,实际上是在 ...

  4. 理解android.intent.action.MAIN 与 android.intent.category.LAUNCHER

    刚才看了一下sundy的视频<LLY110426_Android应用程序启动>,里面讲到luncher这个activity通过获取应用程序信息来加载应用程序,显示给用户,其中就是通过一个应 ...

  5. 在VS2015中用C++创建DLL并用C#调用且同时实现对DLL的调试

    from:http://m.blog.csdn.net/article/details?id=51075023 在VS2015中先创建C#项目,然后再创建要编写的动态库DLL项目,这样做的好处是整个解 ...

  6. SpringMVC的Ajax提交

    这种类型的提交, 必须配合 multipartResolver, $("button:submit").click(function(){ $.ajax({ type : 'POS ...

  7. Mysql导出函数、存储过程

    下面是导出存储过程的代码 1 # mysqldump -u 数据库用户名 -p -n -t -d -R 数据库名 > 文件名 其中,-d 表示--no-create-db, -n表示--no-d ...

  8. 阿里云安装LNMP以及更改网站文件和MySQL数据目录

    LNMP安装了哪些软件?安装目录在哪LNMP相关软件安装目录Nginx 目录: /usr/local/nginx/MySQL 目录 : /usr/local/mysql/MySQL数据库所在目录:/u ...

  9. scala 学习笔记(07) 一等公民的函数

    在scala中一切皆对象,一切皆函数,函数跟Int,String.Class等其它类型是处于同等的地位,换句话说,使用函数跟使用普通的类型一样,没什么区别,因此: 1.函数可以赋值给变量,可以当参数传 ...

  10. Spring Security笔记：使用数据库进行用户认证(form login using database)

    在前一节,学习了如何自定义登录页,但是用户名.密码仍然是配置在xml中的,这样显然太非主流,本节将学习如何把用户名/密码/角色存储在db中,通过db来实现用户认证 一.项目结构 与前面的示例相比,因为 ...