Css 嵌套flexbox项中的截断文本

我想截短flexbox项目中的文本。这完全行得通。但是，如果此flexbox项目包装在另一个flexbox项目中，它将断开。有没有一种方法可以使所有东西都流动而不破裂

我做了一支笔，你可以看到它在这里断裂：

.accordeon{
宽度：300px；
背景色：#eeeeee；
}
.accordeon_uuRow{
/*如果你移除这个，它就会工作*/
显示器：flex；
}
.accordeon_uu行标签{
弹性基准：30%；
}
.accordeon_uu行内容{
列表样式类型：无；
左侧填充：0；
页边距底部：0；
边际上限：0；
}
.accordeon_uu行项目{
显示器：flex；
}
.accordeon_uu行值{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}

流动性


1分钟
超市


1分钟
超市


流动性


1分钟
超市


1分钟
超市


学校


1分钟
贝多芬广场1号阿卡德米希体育馆


1分钟
超市

不确定您希望它看起来像什么，但您可以通过使用网格布局而不是flexbox来完成它。因此，父容器中不会出现任何异常

以下是如何完成网格布局：

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: left;
    padding: 0;

}

.row {
    width: 300px;
    margin: 0 auto;

}

.row::after {
    content: "";
    clear: both;
    display: block;
}

然后给每个accordeon_uu行指定行类，给每个accordeon_uu行项指定列12类。 这样可以确保项目始终包含在父行中。 您可以为项目分配不同的col-n类

---

这将以网格布局显示您的代码。根据屏幕宽度改变布局也容易得多

您可以添加以下行：

.accordeon__row-content {
  ...
  min-width: 0; /* https://www.w3.org/TR/css-flexbox-1/#min-size-auto */
}

并调整此行：

.accordeon__row-label {
  flex: 0 0 30%; /* fixed width flex item, previously flex-basis: 30%; */
}

---

不知道你在找什么。是这个吗？