divを他のdiv内に入れ子にし、親div内に自動調整可能な高さと重さで埋め込む方法

Question

サンプルレイアウトを作成しました。 このレイアウトでは、青色で強調表示されている<div>は、茶色の色flexで塗りつぶしてください。ブラウザのウィンドウサイズに合わせて自動的に調整する必要があります。茶色のレイアウトのHTMLコードは以下のようになります。

<div layout="column" style="height:100vh;"> 
<div flex="20" class="bg-brown"> //height of this div is less than 100vh 
    <div class="bg-blue"> //width and height os this div should be same as brown color highlighted div() 
    <div class="unselectable"> hello swipe this </div> 
    </div> 
</div> 
</div> 

私はすでにStackoverflowで答えを試しています。しかし、彼らのうちの誰も働いていません

body, 
 
html { 
 
    height: 100%; 
 
}

<div flex="20" class="bg-brown" style="height:100%"> 
 
    <div class="bg-blue" style="height:100%"> 
 
    <div class="unselectable">hello swipe this</div> 
 
    </div> 
 
</div>

Answer 1

あなたはdisplay: flex; flex-flow: column;を持つようにdiv.bg-brown設定することができ、かつbg-blueはflex: 1を持っている：私はすでにこれを試してみました

角度素材を使用しているためそれがあると思います。それはトリックを行う必要があります。例えば

：http://jsbin.com/cozukizego/edit?html,output