Why is my text flowing outside my Paragraph Element? - html

Question

I have a widget that will display a listing of comments. The intent is...for the element to simply automatically expand to display the comment (text).
However, no matter what I try, either the element (itself) expands beyond the page...or the text flows beyond the bounds of the element(s).
I would like it to:
Adjust to parents width (if possible)
Auto-expand the height to fully-display the comment (if possible)
I've been trying:
Combinations of fixing inline-size, word-wrapping & overflow
But I cant seem to make it work
.commenting-context {
background-color: #fff;
border: 1px solid #B9B9B4;
display: none;
position: absolute;
margin-top: 20px;
min-width: 500px;
padding: 10px;
-webkit-box-shadow: 0 0 3px 1px #2e6da4;
-moz-box-shadow: 0 0 3px 1px #2e6da4;
box-shadow: 0 0 3px 1px #2e6da4;
}
.commenting-context section header {}
.commenting-context section header h5 {
color: #B4B4B3;
margin-top: 0px;
}
.commenting-context section header h5 .topic {
color: #000;
font-weight: 700;
}
.commenting-context .comment-gallery {
display: none;
}
.commenting-context .comment-gallery .comment {
margin-left: 10px;
}
.commenting-context .comment-gallery .comment:first-child {
margin-top: 15px;
}
.commenting-context .comment-gallery .comment header {
padding-bottom: 10px;
}
.commenting-context .comment-gallery .comment header .author {
margin-right: 5px;
font-weight: 700;
}
.commenting-context .comment-gallery .comment header .author.system {
color: #ccc;
}
.commenting-context .comment-gallery .comment header .title {
margin-right: 5px;
}
.commenting-context .comment-gallery .comment header .datetime {
color: #B4B4B3;
}
.commenting-context .comment-gallery .comment p {
font-size: 12px;
margin-top: 10px;
padding: 5px;
inline-size: 400px;
}
.commenting-context .working-status {
border: 1px solid #E7E2E2;
border-radius: 5px;
padding: 10px;
}
.commenting-context .working-status img {
height: 50px;
}
.commenting-context .working-status p {
color: #09347a;
font-size: 20px;
margin-top: 10px;
}
<!-- Comment Widget -->
<div class="commenting-context" data-context-id="0" data-context-fullname="">
<!-- Comment Header -->
<section>
<header class="clearfix">
<h5 class="pull-left">Comments for <span class="topic"></span></h5>
</header>
</section>
<!-- Comment Gallery -->
<section class="comment-gallery"></section>
<!-- Working Message -->
<div class="working-status">
<center>
<img src="/Content/Images/green-working-spinner.gif" />
<p>Working</p>
</center>
</div>
</div>
<!-- Comment -->
<article class="comment" data-id="0" data-commenting-id="0" data-user-id="0" data-is-system-comment="false">
<header class="clearfix">
<span class="datetime"></span>
<div class="pull-right">
<span class="author text-right"></span>
<span class="title text-right"></span>
</div>
</header>
<p></p>
<hr />
</article>
VISUAL:

Answer 1

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!

Answer 2

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'>

Answer 3

use position property in css
Position:relative;