Here is a link to a fiddle: https://jsfiddle.net/8dvhx0ap/1/
Below is the HTML:
.sidenav {
height: 100%;
width: 160px;
position: fixed;
top: 0;
left: 0;
background-color: black;
display: flex;
}
.smallDiv {
background-color: green;
padding: 10px;
}
.bigDiv {
background-color: blue;
padding: 10px;
width: 60vw;
height: 60vh;
}
.main {
margin-left: 160px;
flex: 1 1 auto;
}
.container {
width: 100%;
display: block;
box-sizing: border-box;
padding: 20px;
}
.grid {
justify-content: center !important;
width: 100%;
display: flex;
flex-wrap: wrap;
box-sizing: border-box;
}<div id="app">
<div style="height: 50px; background-color: red;"></div>
<aside class="sidenav"></aside>
<div class="main">
<div class="container">
<div class="grid">
<div class="smallDiv">
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
<input type="text"><br><br>
</div>
<div class="bigDiv">
</div>
</div>
</div>
</div>
</div>This setup aims to have the blue div fill the empty space dynamically. When viewed on a standard screen, the green div should be on the left, and the large blue area next to it should take up all available space without any scrollbars. Resizing the page will adjust the size of the blue div accordingly. On smaller screens, like phones, the two divs should stack vertically.
How can I achieve the goal of having the blue div fill the empty space in the layout?