html - 带有可变宽度元素的 overflow-x 容器

Question

我正在尝试获取一个垂直导航列表，该列表将允许比导航本身更宽的元素。用户可以为将出现在这里的元素输入他们喜欢的任何名称，所以我无法控制它们的宽度，除了可能非常高的最大字符长度之外。

我尝试了几种不同的方法，并且似乎想出了多种方法来实现相同的错误结果，一次使用 flexbox，一次不使用。在这两种情况下，如果我有一些“正常”大小的元素不会溢出导航之外，它们一开始看起来都很好。但是如果我有一个超大的元素溢出到容器之外，并且用户向右滚动，他们将看到元素边界没有延伸到右边。

如果我将外部“元素”用于视觉样式(浅蓝色)，它们最终都具有相同的宽度，但宽度不足以解决溢出问题。如果改为尝试设置内部元素的样式(绿色)，则只有溢出的元素才是正确的宽度，而所有其他元素的宽度根据它们的长度而不同。

有没有办法:

1. 当有一个比容器大的大元素溢出时，所有元素看起来都是相同的宽度
2. 不设置任意宽度，因为我无法控制用户字符串的长度
3. 只有 CSS，没有 javascript

初始 View ，看起来不错...

向右滚动...看起来很糟糕!

密码本

这是 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 {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%:;
}

Codepen link