Divide sections one with fixed height and one variable with flexbox

Question

I want to divide the content section(I am excluding the header and footer) vertically with flexbox(Or is there a better way to do it with grids?). The top section must have a fixed height and the bottom section must fill up the rest of the remaining area.

Answer 1

In order for the bottom section to fill up the remaining area, you could use the calc() function.

Since your top section has a fixed height, we can se the bottom section like this:

.top-section {
  // Change the X
  height: X; 
}

.bottom-section {
  // X is the height of the top section
  height: calc(100% - X); 
} 

Answer 2

You can use flex-basis to control the height of a flex item in the column layout.

Here I am using short-handed syntax for flex: 0 1 auto; /* The above is shorthand for: flex-grow: 0, flex-shrink: 1, flex-basis: auto */

html,
body {
  height: 100%;
  margin: 0;
}

.page {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.page .header {
  flex: 0 1 100px;
  background-color: lightgreen;
}

.page .content {
  flex: 1 1 auto;
  background-color: lightblue;
}

<div class="page">
  <div class="header">
    <p><b>header</b>
      <br />
      <br />
      <br />
      100px fixed for content</p>
  </div>
  <div class="content">
    <p>
      <b>content</b>
      <br />
      <br />
      <br />
      Remaining spce ...
    </p>
  </div>
</div>