Div Element Resizing

[JeffCampbell]

I am trying to find a way to make something render on a page. The goal is to have a colored rectangle with text centered inside. I am using this as a visual marker to highlight specific content on the page. A picture is attached to show what it looks like.

Previously, I used this to style the element:

<table style="border-collapse: collapse; width: 15%; height: 40px; background-color: #f5a871;" border="0">
<tbody>
<tr>
<td style="width: 99.9335%;"><h4 style="text-align: center;"><strong><span style="color: #2c2c54;">CONCLUSION</span></strong></h4></td>
</tr>
</tbody>
</table>

I have been slowly updating various things on my course to use more modern techniques, such as <div> tags. Here was an updated version which renders nearly identically:

<div style="width: 15%; height: 40px; background-color: #f5a871; padding: 2px;">
    <h4 style="text-align: center; margin: 0; padding: 5px;"><strong><span style="color: #2c2c54;">GOALS</span></strong></h4>
</div>

Here is where my dilemma lies. If I zoom in the browser window while teaching, text within the latter example will sometimes bleed outside the border for the div element. A second screenshot is included to show what this looks like. I've also noticed this happens if the browser window size is reduced. I discovered this initially while doing some side-by-side windows the other day. However, when I used the table method, this issue disappears. The element will reduce in width/height, but will not reduce so far that the text bleeds out.

I've tried editing various parts of the div example, including a max-width, adding flex to the display, and even changing the font to include em, all based on research. However, the problem still exists. I know that CSS and HTML in Canvas does not render everything and will strip out unsupported tags. I am wondering if anyone with more experience might have an idea to help me create the element and prevent the issue using div, or do I need to go back to rendering everything with tables? I have noticed that this happens in some other areas where the div tag was used.

[matthew_buckett · Accepted solution]

To prevent it from wrapping the contents on very narrow screens you can add:

min-width: fit-content

to the <div>, for example:

<div style="width: 15%; height: 40px; background-color: #f5a871; padding: 2px; min-width: fit-content;">
    <h4 style="text-align: center; margin: 0; padding: 5px;"><strong><span style="color: #2c2c54;">GOALS</span></strong></h4>
</div>

This mean it grows as the screen grows, but not cause the heading the break. 

[JeffCampbell]

Thank you Matthew. I tested it on several different spots and the problem is gone.