How to make div fill remaining height of parent

Is it possible to make the inner-main-dynamic-size element (orange box) fill the remaining space of the outer-fixed-size element (red box/border)?

The element in question takes 100% of it’s parents height, but since the parent has another child with a fixed size (the purple box), it gets pushed outside of the parent.

.outer-fixed-size {
  width: 400px;
  height: 100px;
  background-color: red;
  padding: 5px;
  box-sizing: border-box;
}
.inner-top-fixed-size {
  height: 50px;
  width: 100%;
  background-color: purple;
}
.inner-main-dynamic-size {
  height: 100%;
  width: 100%;
  background-color: orange;
}

<div class="outer-fixed-size">
  <div class='inner-top-fixed-size'>
  </div>
  <div class='inner-main-dynamic-size'>
  </div>
</div>

I know I could harcode the inner-main-dynamic-size element to have height: calc(100% - 50px), but I’d rather avoid having to hardcode these kind of calculations for something so simple, if possible.

>Solution :

if I understand your question correct and the two elements will always be on top of each other, then making the parent a flex-container (add display: flex;) could solve the issue. That way the child-divs will stay flexible.
flex-direction: column will ensure that the child-divs don’t end up next to each other but stacked vertically.
flex: 1 instead of height on the dynamic div will make it take up the remaining space.

More about flex-direction and a great flex guide.

.outer-fixed-size {
  width: 400px;
  height: 100px;
  background-color: red;
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.inner-top-fixed-size {
  height: 50px;
  width: 100%;
  background-color: purple;
}
.inner-main-dynamic-size {
  flex: 1;
  width: 100%;
  background-color: orange;
}

<div class="outer-fixed-size">
  <div class='inner-top-fixed-size'>
  </div>
  <div class='inner-main-dynamic-size'>
  </div>
</div>