您可以添加min-width: 0;
到弹性项目。
.flex--1 {
flex: 1 1 auto;
min-width: 0;
}
或添加overflow: hidden;
到它。
.flex--1 {
flex: 1 1 auto;
overflow: hidden; /*or auto*/
}
[4.5。弹性项目的隐含最小大小
为了为弹性商品提供更合理的默认最小尺寸,此规范引入了一个新auto
值作为CSS 2.1中定义的min-width
和min- height
属性的初始值 。
或者,您可以将内容包装到容器中。
.container {
display: table;
table-layout: fixed;
width: 100%;
}
.ellipsis {
text-overflow: ellipsis;
white-space: Nowrap;
overflow: hidden;
}