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. centos 文档的压缩和打包 gzip,bzip2,xz,zip,unzip,tar,tgz 第九节课

    centos  文档的压缩和打包   gzip,bzip2,xz,zip,unzip,tar,tgz  第九节课 SAS盘可以支持热插拔,看机器 tar.zip.tar -czvf 不会动源文件,gz ...

  2. jvm启动

    首先使用 Java 命令启动JVM 其次进行JVM配置的装载——根据当前路径和系统的版本去寻找jvm.cfg文件,装载配置. 每种需要java虚拟机的软件,都会带一个jvm.cfg.然后jvm.cfg ...

  3. java.lang.NoSuchMethodError: scala.Predef$.refArrayOps([Ljava/lang/Object;)Lscala/collection/mutable/ArrayOps;

    用Maven创建了一个spark sql项目,在引入spark sql jar包时引入的是: <dependency> <groupId>org.apache.spark< ...

  4. Winzip和Winrar命令行的使用

    Winzip和Winrar除了提供丰富灵活的图形界面操作功能外,二者都还具备从命令行模式进行文件的压缩与解压缩操作功能,极大的方便了我们在批处理文件中调用压缩软件.以下给出了二者的常用命令行使用方法: ...

  5. java多线程(五)

    Java 多线程同步 锁机制与synchronized 打个比方:一个object就像一个大房子,大门永远打开.房子里有很多房间(也就是方法).这些房间有上锁的(synchronized方法), 和不 ...

  6. (9)SpriteFrameCache和TextureCache

    简介 SpriteFrameCache 主要服务于多张碎图合并出来的纹理图片.这种纹理在一张大图中包含了多张小图,直接通过TextureCache引用会有诸多不便,因而衍生出来精灵框帧的处理方式,即把 ...

  7. Entity Framework Code First级联删除(转)

    使用Data Annotations: 如果我们要到一对主从表增加级联删除,则要在主表中的引用属性上增加Required关键字,如: public class Destination { public ...

  8. 528. Random Pick with Weight

    1. 问题 给定一个权重数组w,w[i]表示下标i的权重,根据权重从数组中随机抽取下标. 2. 思路 这道题相当于 497. Random Point in Non-overlapping Recta ...

  9. this指向 - 总结

    /* 总结: this 的指向: 1.this 的指向 是在执行上下文时才确定的, 并且确定后不可更改: 2.this 指向 “其执行上下文的环境对象”; “其执行上下文的环境对象” 判读依据如下: ...

  10. 《Java程序设计》第三章-基础语法

    20145221<Java程序设计>第三章-基础语法 总结 教材学习内容总结 类型.变量与运算符 类型 Java可区分为基本类型(Primitive Type)和类类型(Class Typ ...