Styling progress bar - calculating width - html

Question

I have the following code:
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 20px;
height: 30px;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>
The problem is that the <div class="perc"> can go up to width:95%;. How would I go about calculating pixels so that I can use JS 1%-100%. To clarify: I'm adding width with JS, so that's not an issue.

Answer 1

Why this happens
This issue is happening because you are setting the width to 100%, but the inner box also has a padding of 10px (in left and right) and a border of 2px. That makes it have an actual width of 100% of its parent width + 20px (10px margin on both sides) + 4px (2px border on both sides).
How to fix it
You could fix it in different ways. The easiest one would be to use box-sizing with a value of border-box:
The width and height properties include the padding and border, but not the margin.
The code would look like this (note how the height changes too):
.mod-prb {
display: block;
width: 250px;
height: 35px;
border: 2px solid #809097;
border-radius: 8px;
padding: 3px;
}
.mod-prb > div {
display: block;
height: 35px;
width:100%;
border: inherit;
border-radius: 8px;
text-align: right;
padding: 0 10px;
box-sizing:border-box;
}
<div class="mod mod-prb">
<div class="perc"></div>
</div>