Why is my text flowing outside my Paragraph Element?

So, often for UX purposes many third party data tables will apply a white-space: nowrap to a cells contents to apply an ellipsis with a hover tooltip to save on screen real estate in cases with long content strings (or sometimes they'll toggle the table-layout property on the table itself from auto to fixed for other scenarios. Either can effect content strings in various cases.

In this case a definition of white-space: nowrap is apparently applied accompanied by the line-height restriction you identified. So by overriding these properties to allow the wrapping then the cells content will in invoke the default overflow and word-break definitions to allow the user agent rendering it to perform like a paragraph would normally behave.

Glad you got your remedy!

Use a mix of max-width, and max-content. Type into this snippet to see how it works.

$("input[type='text']").keyup(function () 
{
  $("#msg")[0].innerHTML = $("input[type='text']")[0].value;
});

#limit {
  width: 300px;
  height: 100px;
  border: 2px solid black;
  padding: 2px;
}

#msg 
{
  width: max-content;
  max-width: 98%;
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id = "limit">
  <div id = "msg">
  </div>
</div>
<input type = 'text'>