Как установить 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

Вы можете установить div.bg-brown иметь display: flex; flex-flow: column; и bg-blue иметь flex: 1. Он должен делать трюки.

Например: http://jsbin.com/cozukizego/edit?html,output