當有多個flex嵌套，而又有子元素需要單行省略的時候，你會發現～單行省略無效了，如圖：
想要的效果：
而實際的效果：
不僅沒有單行省略，還把右箭頭給擠沒了。
2、頁面html+css
3、解決辦法
方案一： 給.item-value的父級.mark-info設置寬度min-width:0; 或者設置overflow:hidden
注：min-width、max-width、width屬性都可以設置，但因為文字的長度不定設置width或者max-width都有可能遮住有效區域，所以建議使用min-width: 0比較符合。
原理：flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選，具體可參考https://www.runoob.com/w3cnote/flex-grammar.html講解
<' flex-grow '>：用來指定擴展比率，即剩余空間是正值時此「flex子項」相對於「flex容器」里其他「flex子項」能分配到空間比例。
在「flex」屬性中該值如果被省略則默認為1
<' flex-shrink '>：用來指定收縮比率，即剩余空間是負值時此「flex子項」相對於「flex容器」里其他「flex子項」能收縮的空間比例。
在收縮的時候收縮比率會以伸縮基准值加權
在「flex」屬性中該值如果被省略則默認為1
<' flex-basis '>：用來指定伸縮基准值，即在根據伸縮比率計算出剩余空間的分布之前，「flex子項」長度的起始數值。
在「flex」屬性中該值如果被省略則默認為「0%」
在「flex」屬性中該值如果被指定為「auto」，則伸縮基准值的計算值是自身的 <' width '> 設置，如果自身的寬度沒有定義，則長度取決於內容。
當我們設置white-space:nowrap，項目控件由於不能計算多余的空間導致無法收縮了。此時我們設置固定尺寸就可以收縮了
方案二： 改變單行省略的寫法
超出一行顯示省略號不僅僅是使用white-space:nowrap屬性，我們還可以使用下圖代碼達到效果，而且通過 -webkit-line-clamp可以來設計幾行才出現省略號的情況。但由於存在兼容問題建議移動端使用
.item-value {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}