overflow-x容器，带有可变宽度的项目

Question

我试图获得一个垂直导航列表，允许使用比导航本身更宽的元素。用户可以为此处显示的项目输入他们喜欢的任何名称，因此除了可能非常高的最大字符长度外，我无法控制其宽度。

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

如果我使用外部＆＃34;项目＆＃34;对于视觉样式（浅蓝色），它们都以相同的宽度结束，但不足以解决溢出问题。相反，如果尝试为内部项目（绿色）设置样式，则仅对于溢出项目，它是正确的宽度，并且所有其余项目根据其长度是不同的宽度。

有办法：

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

使用溢出和文本溢出

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Codepen link