Text-Überlauf: Ellipse verursacht Flex-Artikel zum Überlauf Flex-Container

Question

Ich habe zwei Spalten in einem Flex-Container. Eine der Spalten (orange) enthält einen Avatar und seine Breite sollte genau 10% des Containers betragen.

Eine andere Spalte (blau) enthält Panel, und der Titel des Panels könnte sehr lang sein, also sollte ich es über CSS abschneiden. Dieses Bild zeigt, was ich erwarte:

Was ich erwarte:

Aber wenn ich versuche, text-overflow: ellipsis, meine zweite Reihe zu tun, wird immer breiter als die Flex-Container. Hier ist Beispiel für dieses Verhalten:

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>

Wie kann ich dieses Problem lösen?

Answer 1

Verwenden Sie width anstelle von flex-basis. Denn in this Documentation haben sie erwähnt

9.9.3. Flex Artikel Intrinsic Größe Beiträge

Die Hauptgröße min-content/max-content Beitrag eines Flex Artikel ist seine Außen min-content/max-content Größe, durch seine flexiblen Basisgröße als Maximum festgeklemmt (wenn Es ist nicht anwachsen) und/oder als Minimum (wenn es nicht schrumpfbar ist), und dann weiter durch seine Min/Max-Hauptgröße Eigenschaften geklammert.

nicht Breite calc(90% - 30px) als row2 Breite

.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>