CSS：如何防止 div 与父高度或父边框重叠

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

提前非常感谢，迈克

Answer 1

这通过添加解决了overflow: hidden;- 感谢 Akshay！