chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素 


 1 <div class="container">
 2     <div class="item">
 3         <div class="item-inner">
 4             <a>
 5                 Botón
 6             </a>
 7         </div>
 8     </div>
 9     
10     <div class="item">
11         <div class="item-inner">
12             <a>
13                 Botón
14             </a>
15         </div>
16     </div>
17     
18     <div class="item">
19         <div class="item-inner">
20             <a>
21                 Botón
22             </a>
23         </div>
24     </div>
25 </div>
 1 .container {
 2   height: 20em;    
 3   display: flex;
 4   flex-direction: column;
 5   border: 5px solid black
 6 }
 7 
 8 .item {
 9     flex: 1;
10     border-bottom: 1px solid white;
11 }
12 
13 .item-inner {
14     height: 100%;
15     width: 100%;
16     display: table;
17     
18 }
19 
20 a {
21     background: orange;
22     display: table-cell;
23     vertical-align: middle;
24     
25 }

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

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

posted @ 2018-09-30 14:37  Jason.Zeng  阅读(6011)  评论(1)  编辑  收藏  举报