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

看看here

使用CSS calc() 函数计算.progressbar 的高度，有关此here 的更多信息。

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

Answer 2

添加 overflow: hidden; 解决了这个问题 - 感谢 Akshay！

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

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

html

css

height