溢出x容器與可變寬度項目

Question

我想獲得一個垂直導航列表，將允許比nav本身更寬的元素。用戶可以輸入他們喜歡的任何名稱來顯示此處顯示的項目，因此我無法控制它們的寬度，除了可能的最大字符長度。

我嘗試了幾種不同的方法，似乎想出了多種方法來實現相同的錯誤結果，一旦使用了flexbox後就沒有了。在這兩種情況下，如果我有一些「正常」大小的元素不會在導航區外溢出，那麼它們首先看起來很好。但是如果我有一個超大的元素溢出容器外，並且用戶向右滾動，他們會看到項邊界不會延伸到右側。

如果我使用外部「項目」進行視覺造型（淡藍色），它們都以相同的寬度結束，但不足以解釋溢出。如果改爲嘗試對內部物品進行造型（綠色），則僅適用於溢出物品的寬度是正確的，其餘所有物品的寬度根據其長度而定。

有沒有一種辦法：

1. 的所有商品似乎是相同的寬度當存在溢出比容器
2. 沒有設置一些任意寬度大的大項目，因爲我不噸有對用戶的字符串可能有多長
3. CSS只，沒有JavaScript的

初始視圖控制，看起來不錯...

向右滾動，...很糟糕！

Codepen

這裏的Codepen

HTML

<div id="container"> 
    <div class="item"><span>Item 1</span></div> 
    <div class="item"><span>Item 2</span></div> 
    <div class="item"><span>Item 3</span></div> 
    <div class="item"><span>Item 4</span></div> 
    <div class="item"><span>Super Long Item Name of Obliteration</span> 
    </div> 
</div> 

<div id="flex-container"> 
    <span class="flex-item"><span>Item 1</span></span> 
    <span class="flex-item"><span>Item 2</span></span> 
    <span class="flex-item"><span>Item 3</span></span> 
    <span class="flex-item"><span>Item 4</span></span> 
    <span class="flex-item"><span>Super Long Item Name of Obliteration</span> 
    </span> 
</div> 

CSS

#container { 
    width:200px; 
    height:400px; 
    background-color: red; 
    overflow:auto; 
} 

.item { 
    height: 40px; 
    border: 1px solid blue; 
    background-color:lightblue; 
    white-space: nowrap; 
} 

#flex-container { 
    width:200px; 
    height:400px; 
    background-color: red; 
    overflow:auto; 
    display: flex; 
    flex-direction:column; 
} 

.flex-item { 
    height: 40px; 
    border: 1px solid blue; 
    background-color:lightblue; 
    white-space: nowrap; 
} 

/* Content */ 
span > span, 
div > span { 
    background-color: green; 
} 

Answer 1

使用溢出和文本溢出

.item, 
 
.flex-item { 
 
\t overflow: hidden; 
 
\t text-overflow: ellipsis; 
 
\t max-width: 100%:; 
 
}

Codepen link