Srinesh Srinesh - 5 months ago 12
CSS Question

How to set a div to nested inside another div and to fill within parent div with auto adjustable height and weight

I have created a sample layout. sample layout
In this layout, i want that

<div>
that is highlighted in blue color to be filled within brown color
flex
. and it should be auto adjustable according to the browser window size. The HTML code of the brown color layout looks like below.

<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>


I have already tried some of the answers in Stackoverflow. But non of them worked. I think that is because I use Angular Material

I already tried this:



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

You can set the div.bg-brown to have display: flex; flex-flow: column;, and the bg-blue to have flex: 1. It should do the tricks.

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