1 <div class="container">
<div class="item">
<div class="item-inner">
<a>
Botón
</a>
</div>
</div> <div class="item">
<div class="item-inner">
<a>
Botón
</a>
</div>
</div> <div class="item">
<div class="item-inner">
<a>
Botón
</a>
</div>
</div>
</div>
 .container {
height: 20em;
display: flex;
flex-direction: column;
border: 5px solid black
} .item {
flex:;
border-bottom: 1px solid white;
} .item-inner {
height: 100%;
width: 100%;
display: table; } a {
background: orange;
display: table-cell;
vertical-align: middle; }

代码如上,可以看到, 在chrome49版本中, item-inner设置的height:100%, 无法充满父元素flex: 1撑满的高度

link: http://jsfiddle.net/y8mboo2s/

chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素的更多相关文章

  1. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

  2. chrome 49 版本 跨越 --args --disable-web-security --user-data-dir

    转载: 做前端的,用Ajax获取数据,是常有的事情,同域下自然没问题了,如果是不同域获取数据,浏览器就有个同源策略的限制. 如图: Origin * is not allowed by Access- ...

  3. 解决:子元素设置margin-top,父元素也受影响的问题

    <!doctype html><html> <head> <meta charset="UTF-8"> <title>子 ...

  4. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  5. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  6. 解决子元素设置margin-top,效果到父元素上的问题

    有时当我们设置子元素的margin-top,但是却发现子元素没有出现上外边距的效果,反而是父元素出现了上外边距的效果. 这种问题的解决方法如下: 1.给父元素加边框. 2.给父元素设置padding- ...

  7. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  8. 关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位)

    关于元素设置margin-top能够改变body位置的原因及解决(子元素设置margin-top改变父元素定位) 起因:在进行bootstrap的.navbar-brand内文字设置垂直居中时采用li ...

  9. 为什么子元素设置margin-top会作用在父元素上?

    原因在于:CSS 外边距合并 复现: <!DOCTYPE html> <html lang="en"> <head> <meta char ...

随机推荐

  1. [World Wind学习]22.相机高度和瓦片等级计算

    在这里我们看到判断Lod的级别主要有三个条件: * 1.相机视角范围,视角范围越大,所包含的tileSize就越大 * 2.相机与瓦片距离,距离越远,所包含的tileSize也就越大 * 3.相机视锥 ...

  2. Spark Shuffle调优原理和最佳实践

    对性能消耗的原理详解 在分布式系统中,数据分布在不同的节点上,每一个节点计算一部份数据,如果不对各个节点上独立的部份进行汇聚的话,我们计算不到最终的结果.我们需要利用分布式来发挥Spark本身并行计算 ...

  3. 内置函数——format

    说明: 1. 函数功能将一个数值进行格式化显示. 2. 如果参数format_spec未提供,则和调用str(value)效果相同,转换成字符串格式化. >>> format(3.1 ...

  4. cocos-lua基础学习(九)spite类学习笔记

    创建精灵 ,) ) layer:addChild( sprite ) ) layer:addChild(BatchNode, , kTagSpriteBatchNode) ,) ) layer:add ...

  5. hdu4758 Walk Through Squares

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=4758 题目: Walk Through Squares Time Limit: 4000/20 ...

  6. 尚未指定报表“Report1”的报表定义

    在做RDLC项目中遇到这样的错误 本地报表处理期间出错. 尚未指定报表“Report1”的报表定义 未将对象引用设置到对象的实例. 解决方案: 打开reportViewer->LocalRepo ...

  7. Java 泛型通配符上限和通配符下限

    ①为什么要使用泛型通配符 请参考这篇随笔的下半部分 https://www.cnblogs.com/baxianhua/p/9194369.html   ②通配符上限和通配符下限的简单解释 <? ...

  8. JS在if中的强制类型转换

    JS在if中的强制类型转换 众所周知,JS在很多情况下会进行强制类型转换,其中,最常见两种是: 1.使用非严格相等进行比较,对==左边的值进行类型转换 2.在if判断时,括号内的值进行类型转换,转化为 ...

  9. Linux笔记 #06# 在VPS上自建Git服务

    参考: GitHub Help: Connecting to GitHub with SSH 廖雪峰的官方网站: 搭建Git服务器 菜鸟教程: Git 服务器搭建 1. 安装记录(可能有错...) 本 ...

  10. poj1496 Word Index / poj1850 Code(组合数学)

    poj1850 Code 题意:输出若干个给定的字符串($length<=10$)在字典序中的位置,字符串中的字母必须严格递增. 读取到非法字符串时,输出“0”,终止程序.(poj1496:继续 ...