フレキシボックスラップとオーバーフロー省略記号

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>

のみflexcol-content幅用とそのテキストオーバーフローが隠し作り、flexcol-header幅を無視して、楕円？

これは私が達成したいものですが、省略記号を持つ：

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