Having problems with child div background color HTML Yahoo email

Question

I have a dynamic "progress bar" component that renders a different background color and width for different percentages as so

<div
  style={{
    backgroundColor: '#FFFFFF',
    height: '24px',
    borderRadius: '3px',
    border: '1px solid black'
  }}
>
  <div
    style={{
      width: `${percentage}%`,
      height: '100%',
      backgroundColor: '#15c621'
    }}
  />
</div>

This component works great in all email clients except Yahoo mail. The nested divs background color nor width does not get rendered in the email, and the parents background color is shown for the length of the progress bar. How can I fix this so the child divs background appears with the proper width and color?

Answer 1

[SOLVED] - Adding a non breaking space in the child div forced the height of the div to the parent container. The final code was

    <div
      style={{
        backgroundColor: '#FFFFFF',
        height: '24px',
        borderRadius: '3px',
        border: '1px solid black'
      }}
    >
      <div
        style={{
          width: `${percentage}%`,
          height: '100%',
          backgroundColor: '#15c621'
        }}
      >
        &nbsp;
      </div>
   </div>