I output progress bars in my PDFs based on arbitrary user data. Each bar is a div with child divs and the total of all the child divs adds up to 100%. I've discovered that sometimes the last child div will overflow out of the container (even though the children do not exceed 100% total width). Whether this happens or not seems to be an interaction between the overall width of the parent div and the specific percentages of the child divs.
It seems to me that a child div should never overflow out of the container so long as the total width is not greater than 100%.
I have an example below. The markup consists of the same set of four progress bars, differentiated only by their width. They all should be completely filled by a combination of red and green. The gray that can be seen is where Prince is incorrectly overflowing out of the parent container.
HTML:
Output:
It seems to me that a child div should never overflow out of the container so long as the total width is not greater than 100%.
I have an example below. The markup consists of the same set of four progress bars, differentiated only by their width. They all should be completely filled by a combination of red and green. The gray that can be seen is where Prince is incorrectly overflowing out of the parent container.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style>
div.progress-bar {
display: inline-block;
height: 12px;
margin: 0 4px;
background: #d8d8da;
border-radius: 6px;
overflow: hidden;
}
div.small {
width: 84px;
}
div.medium {
width: 100px;
}
div.large {
width: 717px;
}
div.progress-bar div.bar {
display: block;
height: 100%;
float: left;
}
div.progress-bar div.bar.yes {
background: #58C946;
}
div.progress-bar div.bar.no {
background: #E9394B;
}
</style>
</head>
<body>
<h1>Small (84px)</h1>
<div class="progress-bar small">
<div class="bar yes" style="width: 90%;"></div>
<div class="bar no" style="width: 10%;"></div>
</div>
<div class="progress-bar small">
<div class="bar yes" style="width: 71.667%;"></div>
<div class="bar no" style="width: 28.333%;"></div>
</div>
<div class="progress-bar small">
<div class="bar yes" style="width: 91.7%;"></div>
<div class="bar no" style="width: 8.3%;"></div>
</div>
<div class="progress-bar small">
<div class="bar yes" style="width: 80%;"></div>
<div class="bar no" style="width: 20%;"></div>
</div>
<h1>Medium (100px)</h1>
<div class="progress-bar medium">
<div class="bar yes" style="width: 90%;"></div>
<div class="bar no" style="width: 10%;"></div>
</div>
<div class="progress-bar medium">
<div class="bar yes" style="width: 71.667%;"></div>
<div class="bar no" style="width: 28.333%;"></div>
</div>
<div class="progress-bar medium">
<div class="bar yes" style="width: 91.7%;"></div>
<div class="bar no" style="width: 8.3%;"></div>
</div>
<div class="progress-bar medium">
<div class="bar yes" style="width: 80%;"></div>
<div class="bar no" style="width: 20%;"></div>
</div>
<h1>Large (717px)</h1>
<div class="progress-bar large">
<div class="bar yes" style="width: 90%;"></div>
<div class="bar no" style="width: 10%;"></div>
</div>
<div class="progress-bar large">
<div class="bar yes" style="width: 71.667%;"></div>
<div class="bar no" style="width: 28.333%;"></div>
</div>
<div class="progress-bar large">
<div class="bar yes" style="width: 91.7%;"></div>
<div class="bar no" style="width: 8.3%;"></div>
</div>
<div class="progress-bar large">
<div class="bar yes" style="width: 80%;"></div>
<div class="bar no" style="width: 20%;"></div>
</div>
</body>
</html>
Output: