divs width (or height whichever one I can get to work) will not expand with content

Question

yes, I know this is a duplicate I haven't been able to fix it still. I've tried removing width but then the div is always the width of the entire page. CSS for div:

.forum-post{
background-color: #F5DBA6;
margin-top: 20px;
border 3px solid #737D72;
min-width: 30%;
}

html for div:

<ul class="forum-replies">
    {% for reply in replies %}
    {% if reply.what_thread == 0 %}
    <li>
      <div class="forum-post">
          <h4 style="margin-top: 0px;"><text style="color: blue;">{{reply.title}}</text> - {{reply.name}} #{{reply.id}}- {{reply.date}} <a href="/b/{{reply.id}}">{Reply}</a></h4>
          {% if reply.filename %}
          <p style="margin-top: -20px;"><img src="{{url_for('static', filename = reply.filename )}}" height="100px" width="100px" align="left;" style="vertical-align: top;"/>
              {{reply.data|safe}}</p>
          {% else %}
          <p>{{reply.data|safe}}</p>
          {% endif %}

      </div>
    </li>

all css if it matters:

    <style>
    body {background-color: #82D57D ;}
    </style>
    <style>
    html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}


      .home-container{
    background-color: rgb(190, 171, 239);
    height: auto;
    width: 1520px;
    border: 2px solid rgb(255, 255, 255);
    margin-left: 200px;
    margin-right: 200px;
    }

    .forum-post{
    background-color: #F5DBA6;
    margin-top: 20px;
    border 3px solid #737D72;
    margin-right: 600px;
    }


    .banner{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    width: 50%;
    height: 300px;
    width: 300px;
    }


    .link{
    text-decoration: none;
    color: grey;

    .t{
    color: blue;
    }

    }

I've tried several things for a couple of hours. I don't want to use overflow:auto since i dont want a scroll bar and want the div to actually get bigger. it used to do this fine before adding the image and some other things im not sure what happened. if your confused about anything please lmk EDIT: sorry about the confusing title, I meant that I want the width to grow until the div hits the end of the div that it is inside. and then I want its height to grow. also all {{}} jinja variable are text except for the img EDIT#2: the div is inside the home container div btw, and that div is not inside anything

Answer 1

You can apply max-width: fit-content; to the parent div plus word-break: break-word; to wrap the text after hitting the max width limit.