嵌套柔性盒项目中的截短文本

Question

我想要在flexbox项目中获取被截断的文本。这工作完全正常。但是，如果此Flexbox项目包装在另一个Flexbox项目中，则会中断。有没有办法让所有的东西都变得流畅，并且不会爆发？

我做了，你看，它打破这里的笔：http://codepen.io/anon/pen/apJYaN

.accordeon { 
 
    width: 300px; 
 
    background-color: #eeeeee; 
 
} 
 

 
.accordeon__row { 
 
    /* if you remove this, then it works */ 
 
    display: flex; 
 
} 
 

 
.accordeon__row-label { 
 
    flex-basis: 30%; 
 
} 
 

 
.accordeon__row-content { 
 
    list-style-type: none; 
 
    padding-left: 0; 
 
    margin-bottom: 0; 
 
    margin-top: 0; 
 
} 
 

 
.accordeon__row-item { 
 
    display: flex; 
 
} 
 

 
.accordeon__row-value { 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="accordeon"> 
 
    <div class="accordeon__row"> 
 
    <div class="accordeon__row-label"> 
 
     Mobility 
 
    </div> 
 
    <ul class="accordeon__row-content"> 
 
     <li class="accordeon__row-item"> 
 
     <div class="accordeon__row-value"> 
 
      1 min 
 
     </div> 
 
     <div class="accordeon__row-value"> 
 
      Supermarket 
 
     </div> 
 
     </li> 
 
     <li class="accordeon__row-item"> 
 
     <div class="accordeon__row-value"> 
 
      1 min 
 
     </div> 
 
     <div class="accordeon__row-value"> 
 
      Supermarket 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="accordeon__row"> 
 
    <div class="accordeon__row-label"> 
 
     Mobility 
 
    </div> 
 
    <ul class="accordeon__row-content"> 
 
     <li class="accordeon__row-item"> 
 
     <div class="accordeon__row-value"> 
 
      1 min 
 
     </div> 
 
     <div class="accordeon__row-value"> 
 
      Supermarket 
 
     </div> 
 
     </li> 
 
     <li class="accordeon__row-item"> 
 
     <div class="accordeon__row-value"> 
 
      1 min 
 
     </div> 
 
     <div class="accordeon__row-value"> 
 
      Supermarket 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="accordeon__row"> 
 
    <div class="accordeon__row-label"> 
 
     Schools 
 
    </div> 
 
    <ul class="accordeon__row-content"> 
 
     <li class="accordeon__row-item"> 
 
     <div class="accordeon__row-value"> 
 
      1 min 
 
     </div> 
 
     <div class="accordeon__row-value"> 
 
      Akademisches Gymnasium Beethovenplatz 1 
 
     </div> 
 
     </li> 
 
     <li class="accordeon__row-item"> 
 
     <div class="accordeon__row-value"> 
 
      1 min 
 
     </div> 
 
     <div class="accordeon__row-value"> 
 
      Supermarket 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 1

您可以添加以下行：

.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%; */ 
} 

codepen

Answer 2

不知道你想让它看起来像什么，但你的使用完成它一个网格布局而不是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__row的给排类，并给每个accordeon__row项目的COL-12级。 这样确保项目始终包含在父行中。 你可以玩弄不同的col-n类到你的物品。

https://jsfiddle.net/alabianc/755vgz29/1/这显示您的代码，但在网格布局。它更容易改变布局，取决于屏幕宽度。