Html 溢出和省略号不起作用的嵌套flex容器

我无法按我需要的方式获得

文本溢出：省略号

和

溢出：隐藏

基本上，我需要使用类

item1

和文本“Please truncate me”来获取左div，以便随着容器宽度的减小而缩小，从而

item1

和

item2

都位于同一行

无论我做什么尝试，我都会以满溢而告终，而且永远不会缩小

在这里尝试了各种解决方案，但没有按我需要的方式工作

.main包装器{
显示器：flex；
证明内容：中心；
宽度：100%；
最大宽度：100%；
身高：100%；
最大高度：100%；
}
.内容{
显示器：flex；
对齐项目：居中；
证明内容：中心；
边缘顶部：20px；
边缘底部：20px；
最大宽度：800px；
宽度：100%；
高度：400px；
背景色：红色；
}
.顶部容器{
显示器：flex；
柔性包装：包装；
宽度：80%；
身高：80%；
背景色：青色；
}
.头衔{
背景色：白色；
}
.桌上容器{
显示：表格；
}
.技能容器{
宽度：100%；
显示：块；
背景颜色：绿色；
}
.技能行{
宽度：100%；
显示器：flex；
证明内容：开始；
背景颜色：蓝色；
}
.项目1{
显示器：flex；
柔性包装：nowrap；
}
.项目2{
弹性收缩：0；
显示器：flex；
柔性包装：nowrap；
}
.项目内容{
显示器：flex；
}
.项目详情{
显示器：flex；
}
.text1{
显示：内联块；
空白：nowrap；
背景颜色：黄色；
}
.小按钮{
显示器：flex；
高度：50px；
宽度：50px；
背景颜色：绿色；
}
.溢流{
溢出：隐藏；
文本溢出：省略号；
}
.flex-w{
柔性包装：包装；
}
.flex nw{
柔性包装：nowrap；
}
.flex min{
flex:1自动；
最小宽度：0；
}
.flex-sh-0{
弹性收缩：0；
}
min0先生{
最小宽度：0；
}

你的技能
请截断我！请截断我！请截断我！请截断我！请截断我！请把我截短
相关性：完全没有

弹性物品的初始设置为

最小宽度：自动

。这意味着，默认情况下，项目不能收缩到其内容的大小以下。这将阻止省略号的呈现，因为该项只是扩展以容纳所有内容

大多数flex项目都应用了必要的

minwidth:0

override。但不是所有的

此外，flex和table属性不能很好地配合使用。混合使用它们可能会破坏flex布局，这在您的案例中似乎正在发生

通过以下调整，您的布局似乎可以正常工作

.table-container {
  /* display: table; */
  min-width: 0; /* NEW */
}

.item-content {
  display: flex;
  min-width: 0; /* NEW */
}

更多信息：

（如果不是为了

display:table

matter，这篇文章将是这个链接的副本。）