Flex-box Footer Element Centered

Question

I'm making a user-resizable GUI window with a header that gains height through new elements, a footer with static height, and a spacer in between that automatically takes up the rest of the height. I attempted using this answer, but the footer ended up vertically-centered. Picture:

If anyone knows why off the top of their head, it would be greatly appreciated. The element is being added to the page with javascript so the code is pretty messy. Thank you for your time.

Answer 1

I still don't know what the issue was, but I made a solution using the css calc() function.

HTML:

<div id="myWindow">
    <div id="header">
        Header
    </div>

    <div id="footer">
        <div id="subHeaderContainer">
            <div id="subHeader">
                Sub Header
            </div>
        </div>

        <div id="subFooter">
            Sub Footer
        </div>
    </div>
</div>

CSS:

#myWindow {
  width: auto;
  height: auto;
  resize: both;
  border: 2px solid black;
  overflow:hidden;
}

#header {
  height: 20px;
  background-color: grey;
}

#footer {
  width:100%;
  height: calc(100% - 20px);
}

#subHeaderContainer {
  width:100%;
  height: calc(100% - 30px);
}

#subFooter {
  width:100%;
  height:30px;
}