Srinesh Srinesh - 4 months ago 6x
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

that is highlighted in blue color to be filled within brown color
. 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>

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:

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>


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

For example:,output