Child div wont calculate percentages correctly

Yes, this question got solved already several times. As far as i understand, the child div doesn’t know the relation of the 100%, kind of like “100% of what?”

Screenshot for further explaination

But in my application, the parent div (height marked in red) has a relation. It takes exactly 50% of its parents height (height marked in blue)

So in the child div, when i set the margin-top of the text to 32%, the text is at about 50% of the parents height (marked in green) and when i set it to a little bit more than 50% the text overflows the div

I dont really know how to solve this so im asking you guys, hope you can help me ^^

btw: I’ve just realized that the pink mark is irrellevant so just ignore it 🙂

<div id="wrapper">
    <div class="leftItem">
        <div class="image">
            <p [ngStyle]="{
                'margin-left': xpos+'%',
                'margin-top': ypos+'%'
            }">{{ text }}</p>
        </div>
    </div>
</div>
.leftItem {
    height: 95%;
    width: 50%;
    float: left;
    display: flex;
    align-items: center;
    justify-content: center;
}
.image {
    display: block;
    width: 90%;
    height: 40vh; /*Also tried %*/
    margin-top: -8%;
    background-color: transparent;
    border-style: solid;
    border-width: 1px;
    overflow: hidden;
}
#wrapper {
    float: left;
    width: 96%;
    height: 94%;
    margin: 2%;
    background-color: white;
    border-radius: 5px;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(211, 211, 211);
    padding : 2%;
}

Source: New feed
Source Url Child div wont calculate percentages correctly