ネストされたフレックスボックスの項目の切り詰められたテキスト

Question

フレックスボックスの項目にある切り詰められたテキストを取得したい。これは全く問題なく動作します。しかし、この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

をしますが、使用してそれを達成しますフレックスボックスではなくグリッドレイアウト。だから、親コンテナから何も外れません。

.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/これはコードを示していますが、グリッドレイアウトです。画面幅に応じてレイアウトを変更するのがずっと簡単です。