중첩 된 flexbox 항목의 잘린 텍스트

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

,하지만 당신은 사용하여 달성 플렉스 박스가 아닌 그리드 레이아웃. 그래서 아무 것도 부모 컨테이너에서 빠져 나옵니다.

.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 항목 안부-12 클래스의 각을 제공 : 여기

은 그리드 레이아웃을 달성 할 수있는 방법이다. 이렇게하면 항목이 항상 부모 행에 포함되도록 할 수 있습니다. 다른 col-n 클래스를 항목에 할당하여 놀 수 있습니다.

https://jsfiddle.net/alabianc/755vgz29/1/ 이것은 코드를 표시하지만 격자 레이아웃입니다. 화면 너비에 따라 레이아웃을 변경하는 것이 훨씬 쉽습니다.