子divの高さを親の高さに拡張するにはどうすればよいですか？

Question

私は同じ行に2つのdivを並べ、縦線で区切って、その行に常に親の高さがあるようにしますdiv。

（効果がない親にposition:absolute、そしてdisplay:tableまたはoverflow:hiddenを使用することはできません）私が見つかりました。すべてのソリューションを実装しようとしましたが、それらのどれも機能しません。

JSFIDDLE

これは私のコードです：

HTML：

<div class="parent-div"> 
    <div class="first-child"> 
    <span class="block">Item</span> 
    <span class="block">Item</span> 
    <span class="block">Item</span> 
    </div> 
    <div class="second-child"> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    <span class="block">Content here</span> 
    </div> 
</div> 

はCSS：

.parent-div { 
    background:green; 
    display: inline-block; 
    width: 100%; 
} 

.first-child, 
.second-child { 
    float: left; 
} 

.first-child { 
    width: 50px; 
    border-right: 2px solid red; 
} 

.second-child { 
    padding-left: 10px; 
} 

.block { 
    display: block; 
} 

Answer 1

あなたは.parent-div

に display:flex;に display:inline-blockを変えることができます

チェックdemo

Answer 2

あなたは親がこのような表として表示をDIV与える場合：

.parent-div { 
height: 100%; 
display: table; 
} 

と子供のためのtabel細胞とフロートを削除し、このような何か：

を https://jsfiddle.net/k45f4Ls2/5/

：

.first-child, 
.second-child { 
    display:block; 
     height: 100%; 
    } 

はこれをチェック