CSS：如何防止重疊的父母身高或父母的邊框

Question

我是新來的CSS，並希望有人可以幫助我這一點。

我正在試圖創建一個簡單的進度條（以後用於JS），其中包含三個獨立的顏色塊（紅色，黃色，綠色）的。

到目前爲止，我有下面的一般工作，但顏色塊的高度（class "progressBar"）始終與父div（class="progressWrapper"）重疊幾個像素。

我想什麼有一個酒吧，在那裏色塊只需填寫其背景，但不重疊它或邊境和周圍的家長DIV可見的邊框。

在我的代碼中，父div似乎並不控制子div。 有人能告訴我我在做什麼錯嗎？

我的CSS（相關部分）：

.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%; 
} 

我的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> 

更新：

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

在進階非常感謝ANCE， 邁克

Answer 1

通過添加overflow: hidden;解決 - 感謝Akshay！

Answer 2

檢查出來here

通過使用CSS calc()功能，這個here更多信息計算的.progressbar高度。

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