CSS: How to prevent div from overlapping parent height or parent border

Question

I am new to CSS and hope someone can help me with this.

I am trying to create a simple progress bar (for later use with JS) that contains three separate color blocks (red, yellow, green).

So far I have the below which works in general but the height of the color blocks (class "progressBar") is always overlapping the parent div (class="progressWrapper") by several pixels.

What I would like to have is one bar where the color blocks just fill out its background but don't overlap it or its border and a visible border around the parent div.

In my code the parent div doesn't seem to control the child divs. Can someone tell me what I am doing wrong here ?

My CSS (relevant parts):

.bgGreen {
    background-color: green;
}
.bgRed {
    background-color: red;
}
.bgYellow {
    background-color: yellow;
}
.progressWrapper {
    border: 1px solid #ccc;
    height: 16px;
    line-height: 16px;
    padding: 0;
}
.progressBar {
    height: 100%;
    line-height: 100%;
    margin: 0;
    max-height: 100%;
}

My HTML:

<div class="col-12 progressWrapper">
    <div class="col-4 progressBar bgRed"></div>
    <div class="col-4 progressBar bgYellow"></div>
    <div class="col-4 progressBar bgGreen"></div>
</div>

Update:

.col-4 {
    width: 33.33%;
}
.col-12 {
    width: 100%;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}

Many thanks in advance, Mike

Answer 1

This got resolved by add overflow: hidden; - thanks to Akshay !

Answer 2

Check it out here

Calculate the height of .progressbar by using the CSS calc() function, more information about this here.

height: calc(56px / 3); /* Height of wrapper devided by number of divs */