How to Make a <div> Fill the Height of the Remaining Space

Source Code: (back to article)

<head>
  <title>Title of the document</title>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
    }
    .box {
      display: flex;
      flex-flow: column;
      height: 100%;
    }
    .box .row {
      border: 1px dotted #0313fc;
    }
    .box .row.header {
      flex: 0 1 auto;
    }
    .box .row.content {
      flex: 1 1 auto;
    }
    .box .row.footer {
      flex: 0 1 40px;
    }
    .box-container {
      display: contents;
    }
  </style>
</head>
<body>
  <div class="box">
    <div class="box-container">
      <div class="row header">
        <p>header (sized to content)</p>
        <img src="https://img.freepik.com/free-photo/wide-angle-shot-single-tree-growing-clouded-sky-during-sunset-surrounded-by-grass_181624-22807.jpg" height="150px" width="150px" />
        
      </div>
      <div class="row content">
        <p>content (fills remaining space)</p>
      </div>
      <div class="row footer">
        <p>footer (fixed height)</p>
      </div>
    </div>
  </div>
</body>