인 flexbox 랩 및 오버 플로우 생략

Question

나는이 조각을 가지고

.flexrow { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flexcol { 
 
    border: 0; 
 
    margin: 0 1px; 
 
    min-height: 48px; 
 
    flex-grow: 1.0; 
 
} 
 

 
.flexcol-header { 
 
    padding: 4px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.flexcol-content { 
 
    padding: 4px; 
 
    vertical-align: top; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="flexrow"> 
 
    <div class="flexcol"> 
 
    <div class="flexcol-header"> 
 
     AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
 
    </div> 
 
    <div class="flexcol-content"> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="flexcol"> 
 
    <div class="flexcol-header"> 
 
     BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
 
    </div> 
 
    <div class="flexcol-content"> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
</div>

인 flexbox이 flexcol-content 폭과 는 텍스트 오버 플로우가 숨겨진 만들기,flexcol-header 폭을 무시 만 포장 만드는 방법과 ellipsed?

이

내가 달성하고자하지만, 무엇 줄임표와이 단지 최소한의 예이지만, 현실 세계에서 내가 가진 서버 생성 된 열을 사용하고 있음을

.flexcol-header-text { 
 
    width: 0; 
 
    overflow: visible; 
 
} 
 

 
.flexcol-header-wrapper { 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; /******* THIS does not work ************/ 
 
} 
 

 
.flexrow { 
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flexcol { 
 
    border: 0; 
 
    margin: 0 1px; 
 
    min-height: 48px; 
 
    flex-grow: 1.0; 
 
} 
 

 
.flexcol-header { 
 
    padding: 4px; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
} 
 

 
.flexcol-content { 
 
    padding: 4px; 
 
    vertical-align: top; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
}

<div class="flexrow"> 
 
    <div class="flexcol"> 
 
    <div class="flexcol-header-wrapper"> 
 
     <div class="flexcol-header-text"> 
 
     AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA 
 
     </div> 
 
    </div> 
 
    <div class="flexcol-content"> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="flexcol"> 
 
    <div class="flexcol-header-wrapper"> 
 
     <div class="flexcol-header-text"> 
 
     BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB 
 
     </div> 
 
    </div> 
 
    <div class="flexcol-content"> 
 
     <input type="text"> 
 
    </div> 
 
    </div> 
 
    <div class="flexcol"> 
 
    <div class="flexcol-header-wrapper"> 
 
     <div class="flexcol-header-text"> 
 
     CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC 
 
     </div> 
 
    </div> 
 
    <div class="flexcol-content"> 
 
     <input type="text" size="4"> 
 
    </div> 
 
    </div> 
 
</div>

주 동적 열.

그래서 열이 얼마나 많은지 그리고 얼마나 큰지 미리 알지 못합니다.

감사

Answer 1

요는 다음과 같이 시도 할 수

,

.flexcol { 
    border: 0; 
    min-height: 48px; 
    overflow: hidden; 
    flex-grow: 1; 
    flex: 0 0 48%; 
    box-sizing: border-box; 
    margin: 0 1%; 
}