Flex的佈局：顯示第一要素，當兩個子元素在同一行

Question

我有這個簡單的模板：

HTML：

.outer { 
 
    display: flex; 
 
    width: 200px; 
 
} 
 

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

<div class="outer"> 
 
    <div class="left inner">The quick brown fox</div> 
 
    <div class="right inner">jumps over the lazy dog</div> 
 
</div>

顯示的結果看起來像The quick b... jumps over th...

我怎樣才能讓它嘗試完全展示第一個元素之前把第二個？如果第一部分沒有足夠的空間，只需放下第二部分。

它應該是這個樣子The quick brown fo...

謝謝！

Answer 1

您需要告訴.left它不應該縮小。你可以通過設置flex-shrink來實現：0;

.left { 
    flex-shrink: 0; 
} 

https://jsfiddle.net/abx03fpx/