親の高さ/幅の変化に基づいて内側の要素を調整する方法は？

Question

私はdivの中にul、liがあります。私はフレックスdispalyを使用しています。 divは親コンテナです。背景、高さ、幅などすべてのスタイルがここに適用されます。 li要素には、div、spanのような内部的な内容があり、text/iconを持つことができます。 親divの幅と高さを調整するときは、内部の内容をすべて調整する必要があります。 icon/text（liの子であるスパン）を中心にする必要があります。パディングは調整する必要があります。私はあなたがこれをチェックして、私はどんな提案のための任意のoption.Thanksを教えてくださいすることができplunker以下

plunker link

に私のニーズを編集しました。

ここに私のCSSコード

.table_ul { 
    display: flex; 
    align-items: center; 
    justify-content: flex-start; 
    width: 100%; 
    height:100%; 
    flex-wrap: wrap; 
    list-style: none; 
    padding:0px; 
} 
.cells_li { 
    flex: 1 1 auto; 
    border: 1px solid red; 
    border-right:none; 
    padding: .5em; 
    text-align: center; 
} 

.cells_li:last-child { 
    border-right: 1px solid red; 
} 
.main_div { 
    background:gray; 
    width:400px; 
    height:20px; 
} 

は、以下のあなたがそれらを親の高さを得ることを確認するためのLIにfloat:leftとheight:100%を割り当てることができ、私のhtmlページ

<div id="group" class="main_div"> 
     <ul class="table_ul"> 
      <li class="cells_li"><div><span>desktop</span></div></li> 
      <li class="cells_li"><div><span>laptop</span></div></li> 
      <li class="cells_li"><div><span>work</span></div></li> 
     </ul> 
    </div> 

Answer 1

です。

/* Styles go here */ 
.table_ul { 
    width: 100%; 
    height:100%; 
    list-style: none; 
    padding:0px; 

} 
.cells_li { 
    border: 1px solid red; 
    border-right:none; 
    padding: 0.5em; 
    text-align: center; 
    width:calc(33% - 1em); 
    float:left;display: inline; 
    height:calc(100% - 1em); 
} 

.cells_li:last-child { 
    border-right: 1px solid red; 
} 
.main_div { 
    background:gray; 
    width:400px; 
    height:150px; 
}