Div overlap the other

Question

Colleagues.

I want to put a text on a div, but as I change the size of the div, the text decreases and ends up breaking. See the image:

The code I’m using is this:

<div style=\"width: 300px; height: 20px; background-color: #FFF; border: 1px solid #000\">
   <div style=\"position: absolute; width: ".$porcentagem."%; height: 19px; line-height:17px; background-color: #F00;\">
      <div style='position: relative'>Estoque final (".$porcentagem."%)</div>
    </div>
</div>

Answer 1

Following your line of reasoning, I put a position: absolute and a width: 300px in the div containing the text with the percentage. I also changed the position: absolute that was on the div that controls the color to position: relative, so the color does not exceed the limit of the div when the value is 100%.

<div style="width: 300px; height: 20px; background-color: #FFF; border: 1px solid #000">
    <div style="position: relative; width: ".$porcentagem."%; height: 20px; line-height:20px; background-color: #F00;">
        <div style='position: absolute; width:300px;'>Estoque final (".$porcentagem."%)</div>
    </div>
</div>

Answer 2

I solved your problem by putting the text div with position: absolute; and defining its width with 300px (size of the father div).

I left an example here on Jsfiddle for you to see.

 <div style='position: absolute; width: 300px'>Estoque final (44%)</div>