テキストオーバーフロー：エリプシスがフレックスアイテムのオーバーフローを引き起こしますフレックスコンテナ

Question

フレックスコンテナの内部に2つの列があります。列の1つ（オレンジ色のもの）にはアバターが含まれ、その幅はコンテナの正確に10％にする必要があります。

もう1つの列（青色）にパネルが含まれていて、パネルのタイトルが長すぎる可能性があるので、CSSで切り捨ててください。この絵は私が期待するものを示しています。

私は何を期待：

しかし、私はtext-overflow: ellipsisをやろうとしている、私の第二列は、フレックスコンテナより広くなってきています。ここでは、この動作の例である：

https://jsfiddle.net/8krtL9ev/1/

.container { 
 
    background: #ddd; 
 
    width: 400px; 
 
    height: 200px; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 

 
.row1 { 
 
    background: red; 
 
    flex-basis: 10%; 
 
    flex-shrink: 0; 
 
} 
 

 
.row2 { 
 
    background: blue; 
 
    flex-basis: 90%; 
 
    margin-left: 10px; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 

 
.panel { 
 
    background: green; 
 
    flex-basis: 50%; 
 
    overflow: hidden; 
 
} 
 

 
.panel-title { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 

 
    <div class="row1"> 
 
    </div> 
 

 
    <div class="row2"> 
 
    <div class="panel"> 
 
     <div class="panel-title"> 
 
     <span>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

どのように私はこの問題を解決することができますか？

Answer 1

flex-basisの代わりにwidthを使用してください。 this Documentationに記載されているので、

9.9.3です。フレックスアイテム固有サイズの投稿

フレックスアイテムのメインサイズ分コンテンツ/ MAX-コンテンツ寄与は 最大としてのフレックス基本サイズ によってクランプその外側分コンテンツ/ MAX-コンテンツサイズ、（もしおよび/または最小値（ が収縮可能でない場合）、さらに最小/最大メインサイズ のプロパティでさらにクランプされます。

必要なのは `最小幅であるrow2幅

.container { 
 
    background: #ddd; 
 
    width: 400px; 
 
    height: 200px; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 

 
.row1 { 
 
    background: red; 
 
    /* flex-basis: 10%; */ 
 
    width: 10%; 
 
    flex-shrink: 0; 
 
} 
 

 
.row2 { 
 
    background: blue; 
 
    /* flex-basis: 90%; */ 
 
    width: calc(90% - 30px); 
 
    margin-left: 10px; 
 
    padding: 10px; 
 
    display: flex; 
 
} 
 

 
.panel { 
 
    background: green; 
 
    flex-basis: 50%; 
 
    overflow: hidden; 
 
} 
 

 
.panel-title { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 

 
    <div class="row1"> 
 
    </div> 
 

 
    <div class="row2"> 
 
    <div class="panel"> 
 
     <div class="panel-title"> 
 
     <span>Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum. Lorem ipsum.</span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>