溢出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