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. [JS]1.Hello Word

    1.Hello Word <!DOCTYPE html> <html> <head> <title>Hello World!</title> ...

  2. Parallel Decision Tree

    Decision Tree such as C4.5 is easy to parallel. Following is an example. This is a non-parallel vers ...

  3. C++ builder 书籍推荐

    china-pub网上书店c++builder书籍专区,本专区专门为c++builder学习者提供目前最为畅销实用的c++builder技术书籍,通过对本专区c++builder书籍的了解,让您学习c ...

  4. Bootstrap table后端分页(ssm版)

    说明bootstrap table可以前端分页,也可以后端sql用limit分页.这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina.ne ...

  5. 2018 Multi-University Training Contest 1 Solution

    A - Maximum Multiple 题意:给出一个n 找x, y, z 使得$n = x + y +z$ 并且 $n \equiv 0 \pmod x, n \equiv 0 \pmod y, ...

  6. JS地址自动返填技术

    系统设计地址为省市县三级联动,规范是规范了,但是无形中增加了系统操作的时间成本,因此设计地址自动返填技术,只要把地址拷贝到详细地址框中,可以自动返填到省市县三级联动的下拉框中. 还好洒家的大学不是混过 ...

  7. Java传统下载和SpringMVC下载

    /** * 传统下载 * @param filename 文件名称 */ @RequestMapping(value="download", method={RequestMeth ...

  8. supervisor初试

    Supervisor (http://supervisord.org) 是一个用 Python 写的进程管理工具,可以很方便的用来启动.重启.关闭进程(不仅仅是 Python 进程).除了对单个进程的 ...

  9. GreenOpenPaint的实现(六)图片的保存和打开

    如果只是直接的图片保存和打开,是没有很多内容的.但是我这里,将EXIF的信息融入其中,使得图像处理的结果能够保存下来.这样就非常有价值意义了. 所有的操作都放在DOC中进行处理. 我之前已经对EXIF ...

  10. linux及安全期中总结——20135227黄晓妍

    Linux及安全期中总结 黄晓妍 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 ...