ディビジョン内のディビットディフィール内のすべての親ディビットを塗りつぶしなしで表示：テーブル

Question

行とセルのあるテーブルに似たものを作成しようとしていますが、現在はDIV要素とすべてを使用しています必要なパーセンテージに対して正確な計算を行うことなく、親DIVの幅（行になる）を埋めるように内側のDIV要素の幅を調整しようとするまで滑らかになります。 MDNから

.container { 
 
    width: 100%; 
 
    display: flex; 
 
    border: 5px solid black; 
 
} 
 

 
.container > div { 
 
    width: inherit; 
 
    display: inline-flex; 
 
    border: 5px solid red; 
 
} 
 

 
.container > div > div { 
 
    border: 5px solid green; 
 
    height: 50px 
 
}

<div class="container"> 
 
    <div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

：

フレックスCSSプロパティが利用可能なスペースを埋めるためにその寸法を変更するフレックスアイテムの能力 を指定する短縮形プロパティです。

あなたは、内側div要素を展開する.container > div > divへflex: 1;を提供する必要があります。

.container > div > div { 
    border: 5px solid green; 
    height: 50px 
} 

Demo

Answer 2

あなたはflexプロパティを使用することができます。

.container { 
 
    width: 100%; 
 
    display: flex; 
 
    border: 5px solid black; 
 
} 
 

 
.container>div { 
 
    width: inherit; 
 
    display: inline-flex; 
 
    border: 5px solid red; 
 
} 
 

 
.container>div>div { 
 
    border: 5px solid green; 
 
    height: 50px; 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

おそらくこれは何が必要でしょうか？

.container { 
 
    width: 100%; 
 
    display: flex; 
 
    border: 5px solid black; 
 
} 
 

 
.container > div { 
 
    width: inherit; 
 
    display: inline-flex; 
 
    border: 5px solid red; 
 
} 
 

 
.container > div > div { 
 
    width: inherit; 
 
    border: 5px solid green; 
 
    height: 50px 
 
}

<div class="container"> 
 
    <div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

は、ここで私はあなたのCSSに変更を加えるが、あなたのdivを自動拡張しようとすると、フレックスを行う必要があります（最も内側のdivがあまりにも幅を継承する必要があります）。 .container > div > divスタイリングを見てください。

.container { 
 
    width: 100%; 
 
    display: flex; 
 
    border: 5px solid black; 
 
} 
 

 
.container > div { 
 
    width: inherit; 
 
    display: inline-flex; 
 
    border: 5px solid red; 
 
    
 
    
 
} 
 

 
.container > div > div { 
 
    border: 5px solid green; 
 
    height: 50px; 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    <div> 
 
     <span>TEST</span> 
 
    </div> 
 
    </div> 
 
</div>