CSS: Performance wise, better to use calc or position absolute

Question

I have a container div with fixed height. Inside two divs, the top height: 50px and the other one must fill the empty space but allowing internal scroll.

Now I have two options:

#up{
    height: 50px;
}

#down{
    position: absolute;
    top: 50px;
    bottom: 0;
}

or:

#up{
    height: 50px;
}

#down{
    height: calc(100% - 50px);
}

If I have many of these cases inside my window, which one is the best to use performance wise?

This Fiddle

ps. I don't care about old browser support.

Answer 1

I would always work with calc option. Both could look the same but they are not.

When you use position:absolute You are taking the container #down out of the html flow.

This means that if anytime you are going to add more stuff to your project, You will have many problems positioning them.

As an example, if you want to add another container below #down (a footer maybe), in your first option it will be placed overlapping #down container right below your header. In the second option it will be placed where you want it.

Answer 2

One way to fill the space would be to use flexbox.

.container {
  display: flex;
  flex-direction: column;
  height: 200px;
}

#up {
  background: yellow;
  flex: 0 0 50px;
}

#down {
  background: orange;
  flex: 1 1 auto;
}

<div class="container">
  <div id="up">
    up
  </div>
  <div id="down">
    down
  </div>
</div>