html - CSS:如何防止div重叠父高度或父边框

Question

我是 CSS 的新手，希望有人能帮助我。

我正在尝试创建一个包含三个独立色 block (红色、黄色、绿色)的简单进度条(供以后与 JS 一起使用)。

到目前为止，我有下面的一般工作，但色 block 的高度 ( class "progressBar" ) 总是与父 div ( class="progressWrapper" ) 重叠几个像素。

我想要的是一个条形，其中色 block 仅填充其背景但不与其重叠或其边框以及父 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!