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  data-context-id="0" data-context-fullname="">

  <!-- Comment Header -->
  <section>
    <header >
      <h5 >Comments&nbsp;for&nbsp;<span ></span></h5>
    </header>
  </section>

  <!-- Comment Gallery -->
  <section ></section>

  <!-- Working Message -->
  <div >
    <center>
      <img src="/Content/Images/green-working-spinner.gif" />
      <p>Working</p>
    </center>
  </div>
</div>

<!-- Comment -->
<article  data-id="0" data-commenting-id="0" data-user-id="0" data-is-system-comment="false">
  <header >
    <span ></span>
    <div >
      <span ></span>
      <span ></span>
    </div>
  </header>
  <p></p>
  <hr />
</article>

VISUAL:

CodePudding user response：

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

CodePudding user response：

use display property

display:relative;