HTML / CSS: child div should use all available space in flexbox

Question

Check out this fiddle: https://jsfiddle.net/8dvhx0ap/1/

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

I want the blue div to fill the empty space. On a normal screen, the green div should be on the left, and the big right space should be filled entirely by the blue div (use the space to the right and bottom but without scrollbars). Changing the page size would result in the blue div getting bigger / smaller. If the screen becomes too small (e.g. I use a phone), the 2 divs should be below each other (like currently).

How can I make the blue div fill the space?

Answer 1

I noticed that the top red div was actually partially hidden by the black sidenav div. So, this meant that the HTML needed to be refactored. Adding content makes it possible to see how it should behave.

You probably also want the black sidenav div to disappear on mobiles, and that can be achieved with a suitable media query.

        .container {
            display: flex;
            flex-direction: row;
        }
        
        .main {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        
        .sidenav {
            flex-basis: 160px;
            flex-shrink: 0;
            color: white;
            background-color: black;
            display: flex;
        }
        
        .topDiv {
            flex-grow: 1;
            height: 60px;
            background-color: red;
        }
        
        .grid {
            display: flex;
            flex-direction: row;
        }
        
        .smallDiv {
            background-color: green;
            padding: 10px;
        }
        
        .bigDiv {
            background-color: blue;
        }
        
        @media only screen and (max-width: 600px) {
            .grid {
                flex-direction: column;
            }
        }

    <div class="container">
        <aside class="sidenav">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vel facilis alias incidunt aperiam sequi a earum delectus nam similique nostrum, tenetur esse aliquid veritatis dicta tempore? Error asperiores tempore illo!</aside>
        <div class="main">
            <div class="topDiv">
                <h1>A Heading</h1>
            </div>
            <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">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet ab doloribus nostrum deleniti debitis, et odit tempora obcaecati perferendis dolorum ratione asperiores odio ipsum. Sequi consequatur qui nisi quibusdam praesentium!
                </div>
            </div>
        </div>
    </div>