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. [css]浮动造成的影响

    浮动造成的影响: 子元素浮动,父元素无法被撑出高了. 如果要给父元素做通栏background? 如果两个box的子元素都浮动,且希望两个box分行显示? box1 box2 box3: float: ...

  2. 上传文件小的oK,大一点的传不了,显示 (failed) net::ERR_CONNECTION_RESET

    我很确定已经修改了php.ini中的文件上传限制,文件权限可写. 修改php.ini file_uploads = on ;是否允许通过HTTP上传文件的开关.默认为ON即是开 upload_tmp_ ...

  3. Django之MTV

    一.MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Template(模版):负责如何把页面展示给用户 View(视图):负责业务逻辑,并在适当的 ...

  4. (2)基本工作流(制作场景与UI)

    1.认识cocos编辑器主界面.   2.制作新场景:   1)打开我们新建的HelloCocos项目,新建场景名称为“Scene”,如下图:   2)点击新建,场景就被创建出来了,如下图:   3) ...

  5. 分页组件vue和jsp版本

    vue版本 <template> <div class="com-vscroll"> <slot name="mcontent"& ...

  6. hdu1700 Points on Cycle

    地址:http://acm.split.hdu.edu.cn/showproblem.php?pid=1700 题目: Points on Cycle Time Limit: 1000/1000 MS ...

  7. 基于Policy Gradient实现CartPole

    http://chenrudan.github.io/blog/2016/09/04/cartpole.html 首页 分类 关于 归档 标签 基于Policy Gradient实现CartPole ...

  8. Vue学习笔记之Vue的模板字符串

    0x00 模板字符串 传统的JavaScript语言,输出模板通常是这样的写的. $('#result').append( 'There are <b>' + basket.count + ...

  9. STRIDE 和 DREAD

    目录 STRIDE 和 DREAD 背景 STRIDE DREAD 注释 STRIDE 和 DREAD 背景 STRIDE 和 DREAD 是最常用也是最好用的安全模型 STRIDE 主要负责对安全风 ...

  10. Intellij IDEA 创建控制台项目,断点调试快捷方式

    在idea 2016中创建一个控制台项目(经常会忘) 打开创建界面 注意,什么都不要选,点击next(最坑的地方,经常忘) 再次点击next ============================= ...