align-items 與 overflow 同時(shí)使用 滾動(dòng)內(nèi)容顯示不完整

因?yàn)樵诖怪狈较驖L動(dòng)條只負(fù)責(zé)顯示從下方溢出的內(nèi)容，你設(shè)置'align-items:center'，發(fā)生溢出時(shí)上下溢出的長度相等，這樣滾動(dòng)只能顯示在下方溢出的那一半內(nèi)容，從上方溢出的就不能顯示了。
解決辦法就是再套一層

<div class="parent">
<div class="child">
  <div class="inner">

    1測試測試測試測試測試測試2
  </div>
</div>
<div class="child">
測試
</div>
<div class="child">
測試
</div>
<div class="child">
測試
</div>
<div class="child">
測試
</div>
<div class="child">
測試
</div>
<div class="child">
測試
</div>

</div>

.parent {
  border: 1px solid red;
  display: flex;
  width: 600px;
  align-items: center;
  
  .child {
    flex-grow: 1;
    flex-basis: 0;
    border: 1px solid black;
    height:50px;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    float: left;
    vertical-align: middle;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    padding-left: 5px;
    overflow-y: auto;
  }
  .inner {
    max-height:50px;
    overflow-y: auto;
  }
}

通過 jQ 限制長度，會(huì)出現(xiàn)...,在div 上面添加title="內(nèi)容內(nèi)容" 屬性，實(shí)現(xiàn)hover 后可以看到全部內(nèi)容。
jq 代碼 如下，可以參考張鑫旭的 http://www.zhangxinxu.com/wor... ，目前是用這種方式解決。

       $(".item").each(function(){
            var maxwidth=25;
            if($(this).text().length>maxwidth){
                $(this).text($(this).text().substring(0,maxwidth));
                $(this).html($(this).html()+'...');
            }
        });