How do I make a div stretch in a flexbox of dynamic height?

Question

I'm trying to make a stacked layout using flexbox. Ideally it'd look like this:

where the bottom (blue) div is a fixed height of 250px and the top div is n-250, where n is the size of the parent container--in another words, the top should stretch to fill the container.

I have some idea of how to do this when I have the container height, but I'd rather avoid having to determine that variable at runtime.

This issue has been covered at length in various forms , but none seem to address this simple use-case (here, for example, works with a header/content/footer, but ostensibly not with just content/footer).

I've set up a codepen with the example.

Answer 1

I think this is answering your question using the flex-grow: 1;. hope it helps

https://jsfiddle.net/BradChelly/ck72re3a/

.container {
  width: 100px;
  height: 150px;
  background: #444;
  display: flex;
  flex-direction: column;
  align-content: stretch;
}
.box1 {
  width: 100%;
  background: steelblue;
  flex-grow: 1;
}
.box2 {
  height: 50px;
  width: 100%;
  background: indianred;
}

<div class="container">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

Answer 2

Minimum line of code. Brad's answer is correct. But here I used flex instead of flex-grow and removed align-items

.container {
  width: 100px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.top {
  width: 100%;
  background: blue;
  flex: 1;
}
.bottom {
  height: 70px;
  width: 100%;
  background: green;
}

<div class="container">
  <div class="top"></div>
  <div class="bottom"></div>
</div>

Demo here