Setting a length (height or width) for one element minus the variable length of another, i.e. calc(x - y), where y is unknown

Question

I know we can use calc when lengths are defined:

flex-basis: calc(33.33% - 60px);
left: calc(50% - 25px);
height: calc(100em/5);

But what i

Answer 1

Flexbox can do that.

Support is IE10 and up.

JSfiddle Demo

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
#container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
#top {
  background-color: lightgreen;
}
#bottom {
  background-color: lightblue;
  flex: 1;
}

  
green box variable height
  
blue box no longer overflows browser window