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/