CSS：フレックスボックスを使用して途中の省略記号、サファリを破る

Question

フロートの代わりにフレックスボックスを使用して2つのコンテンツの間に省略記号を作成しようとしています。私が必要とする効果はおそらく浮動小数点でも働きません。

最初の「列」には、2番目の列の情報よりも重要度の低い情報が含まれているため、2番目の列に入る前に切り捨てる必要があります。

このエフェクトはChromeとFireFoxでは問題なく動作していますが、Safariでエラーが発生しています。

caniuseによるSafariの適切なバージョンを使用しています。これはflexboxを完全にサポートしています。ライブバージョンについては

、そして私が達成しようとしています何のスリムダウンしたバージョン：ここで

.parent { 
 
    background-color: lightgrey; 
 
    padding: 10px 0; 
 
    display: flex; 
 
    max-width: 410px; 
 
    margin-bottom: 2px; 
 
} 
 
.less-important { 
 
    background-color: lightpink; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    padding: 0 5px; 
 
} 
 
.more-important { 
 
    background-color: lightgreen; 
 
    white-space: nowrap; 
 
    padding: 0 5px; 
 
}

<div class="parent"> 
 
    <div class="less-important">Truncate this text because it is less important</div> 
 
    <div class="more-important">The important text</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="less-important">No ellipsis</div> 
 
    <div class="more-important">Important stuff</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="less-important">Less important content</div> 
 
    <div class="more-important">Way more important info that will cause ellipsis</div> 
 
</div>

---

は何が起こっているかのスクリーンショットですSafariで：

これをSafariで正しく動作させるにはどうすればよいですか？

Answer 1

私はそれが.less-importantと.more-importantためflex:プロパティを指定することで、作業ました：

.parent { 
 
    background-color: lightgrey; 
 
    padding: 10px 0; 
 
    display: flex; 
 
    max-width: 410px; 
 
    margin-bottom: 2px; 
 
} 
 
.less-important { 
 
    background-color: lightpink; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    padding: 0 5px; 
 
    flex: 0 1 auto; 
 
} 
 
.more-important { 
 
    background-color: lightgreen; 
 
    white-space: nowrap; 
 
    padding: 0 5px; 
 
    flex: 0 0 auto; 
 
}

<div class="parent"> 
 
    <div class="less-important">Truncate this text because it is less important</div> 
 
    <div class="more-important">The important text</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="less-important">No ellipsis</div> 
 
    <div class="more-important">Important stuff</div> 
 
</div> 
 

 
<div class="parent"> 
 
    <div class="less-important">Less important content</div> 
 
    <div class="more-important">Way more important info that will cause ellipsis</div> 
 
</div>