CSS Height and Width Aren't Consistent between Parent and Child div

Im trying to create a header that shows a title to the left and a list of buttons on the right. To achieve this have a parent #ChatHeader div, which contains two children divs, #ChatHeaderTitle and #ChatHeaderControls.

For some reason the height of 8vh in the parent div isnt the same as the height of 8vh in the children divs. Both divs have their height set as 8vh but the parent div appears smaller than the child. I am also having the same issue with the width.

Im sure I am missing something obvious, but I have been trying everything I can think of and cant fix it.

Simplified version of my HTML:

<div id='ChatHeader'>
    <div id='ChatHeaderTitle'>
        Title
    </div>
    <div id='ChatHeaderControls'>
        Controls
    </div>
</div>

Hear is my CSS:

#ChatHeader {
    width:100%;
    height: 8vh;
    overflow: hidden;

    background-color: #000000;
    color: var(--std-background-colour);   
}

#ChatHeaderTitle {
    height: 8vh;
    width: calc(100% - 8vh);

    padding:1vh;
}

#ChatHeaderControls {
    height: 8vh;
    width: 8vh;

    float:right;
    padding: 1vh;
    font-size:1.5vh;
    color: var(--std-background-colour);
}