How can I fill remaining space but have minimum height in a flex layout?

Question

My goal is to show the header and div in the current window height, leaving the footer hidden until the user scrolls.

I am trying to figure out a way to make div have a minimum height, so that the footer starts to show. However, when I do this the footer ends up going overtop of my div.

How can I give my div a minimum height but still make sure that the content doesn't overlap each other?

As you can see, footer goes over top of div.

body, html {
  height:100%;
}

section {
  display: flex;
  flex-direction: column;
  height: 100%;
}

header {
  border:1px solid red;
}

footer {
  border: 1px solid blue;
  background-color:blue;
}

div {
  background-color:#eee;
  flex: 1;
  min-height:200px;
}

<section>
  <header>header</header>
  <div>content</div>
</section>

<footer>footer</footer>

Answer 1

I'm confused by your question and what you're trying to achieve.

You start saying you want the footer to be hidden until the user scrolls, which is what is already happening.

Then you say you want the start of the footer to show but without overlapping the div? In that case just make the height of the <section> less than 100%, otherwise there is no way to view the footer without it overlapping your div content.

body, html {
  height:100%;
}

section {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  border:1px solid red;
}

footer {
  border: 1px solid blue;
  background-color:blue;
}

div {
  background-color:#eee;
  flex: 1;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<section>
  <header>header</header>
  <div>
    <span>content top</span>
    <span>content bottom</span> 
  </div>
</section>

<footer>footer</footer>