text-break, word-break, all breaks do not work anymore for no apparent reason

I had this issue fixed with text-break from bootstrap, but for some reason, something is overriding it and now my text does not wrap at all. I put a code snippet that reproduces the issue. I've tried everything and I am sure I am missing something silly. I'm only typing now because stackoverflow wants me to. You can ignore the next set of random thoughts.

.comment_input{
    padding: 5px;
    margin: 5px;
    border-radius: 8px;
    border: none;
    width: 100%;
}

.profile-name{
    display: flex;
    align-items: center;
    column-gap: 5px;
}

.profile_image{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.post{
    margin: 10px auto;
    width: 80%;
    border-radius: 3px;
    background: darkgray;
}

.post_padding{
    margin: 5px;
}

.post_comment{
    display: flex;
    align-items: center;
    gap: 5px;
}

.post_top{
    display: flex;
    justify-content: space-between;
}

.hover:hover {
    cursor: pointer;
}

.like-and-comment{
    display: flex;
    justify-content: space-around;
    border-bottom: 1px solid white;
    border-top: 1px solid white;
    align-items: center;
    padding: 5px;
}

.view-more{
    display: flex;
    justify-content: space-between;
    font-size: 14px;
}

.lk{
    display: flex;
    font-size: 14px;
    gap: 5px;
}

.right{
    border-left: 1px solid white;
    border-bottom: 1px solid white;
    border-bottom-left-radius: 30px;
    width: 5%;
    top: 5px;
    position: absolute;
    height: 120%;
    left: -20px;
}

.reply {
    display: flex;
    gap: 10px;
}

.reply-body{
    word-wrap    : break-word;
    overflow-wrap: break-word;
}

.user{
    /* TODO fix text overflow for when no spaces added*/
    background: grey;
    padding: 8px;
    border-radius: 20px;
    /*TODO max variable based on content*/
    width: max-content;
    word-wrap    : break-word;
    overflow-wrap: break-word;
}

.like-comment, .reply_comment{
    cursor: pointer;
}

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- CSS only -->
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
      <link href="/static/css/style.css" rel="stylesheet">
      <script src="https://js.stripe.com/v3/"></script>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
    </head>
<body>

<div class="post">
      <script id="counter40">1</script>
      <div class="post_padding">
        <div class="post_top">
          <div class="profile-name">
            <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
            <div>
              <div id="post_top"> jon </div>
              <div id="post_top2" class="location-time"><span class="time">in 3 hours</span><i class="fas fa-globe-americas"></i></div>
            </div>
          </div>
          <div id="three-dots" style="display: block" class="hover">
            <div class="dropdown">
              <div href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></div>
              <div class="dropdown-menu">
                <div id="post_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
                  <i class="bi bi-pencil-square"> Edit</i>
                </div>

                <div id="post_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
                  <i class="bi bi-eye-slash"> Ban</i>
                </div>
                <div id="post_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
                  <i class="bi bi-clock-history"> History</i>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!--this is really the post-->
        <div class="media ">
          <div class="text-break" id="post_body">hi</div>
          <img id="media_graphic">
        </div>

        <!--Finish this, need media link, media article-->
        

        <div class="like-and-comment">
          <div class="d-flex align-items-center">
            <i id="upvote40" class="fas fa-arrow-up hover" style="color: gray;" onclick="vote(40,1)"></i>
            <span id="upvote_count_badge40" class="badge bg-secondary">0</span>
            <i id="downvote40" class="fas fa-arrow-down hover" style="color: gray;" onclick="vote(40,0)"></i>
          </div>
        
          <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(40)">
              <i class="fas fa-award hover"></i>
          </div>

          <div class="dropdown hover">
            <div class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></div>
            <ul class="dropdown-menu">
              <p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
                <i class="bi bi-signpost-2"> Cross Post</i>
              </p>
              <p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
                <i class="bi bi-clipboard"> Copy Link</i>
              </p>
              <p id="save_post" class="dropdown-item" onclick="save_post(40)">
                <i id="save_post_icon40" class="bi bi-save"> Save</i>
              </p>
            </ul>
          </div>
        </div>

        <div class="view-more">
          <div class="hover" id="load_replies40" onclick="loadReplies(40,0)"></div>
          <div class="hover" id="comment_collapse"> 1 comments</div>
        </div>

        <div class="comment">
          <div id="reply_loader40"><!--Append Replies Here-->
  <div class="lk">
    <script id="counter46">0</script>
    <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
    <div style="width: 100%;">
      <div class="user">
        <div class="reply_author">jon in 6 hours </div>
        <div class="reply-body">word-wrap    : break-word; overflow-wrap: break-word;word-wrap    : break-word; overflow-wrap: break-word;word-wrap    : break-word; overflow-wrap: break-word;word-wrap    : break-word; overflow-wrap: break-word;</div>
      </div>
      <div class="reply">
        <div class="d-flex align-items-center">
          <i id="upvote46" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(46,1)"></i>
          <span id="upvote_count_badge46" class="badge bg-secondary">0</span>
          <i id="downvote46" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(46,0)"></i>
        </div>
        <div class="reply_comment" id="reply46">Reply</div>
        <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
            <i class="fas fa-award hover"></i>
        </div>
      </div>

      <form id="submit_reply46" style="display: none;" autocomplete="off">
        <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
        <input class="comment_input" id="comment_input46" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
        <div id="comment_input_error46" class="invalid-feedback"></div>
      </form>
      <div id="reply_loader46"><!--Nested Replies go here--></div>
    </div>
  </div>
</div>

          <form id="submit_reply" autocomplete="off">
            <div class="post_comment">
              <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
              <input class="comment_input" id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
              <div id="comment_input_error40" class="invalid-feedback"></div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>

Solution

You used max-content for your width in your user container.

The max-content sizing keyword represents the intrinsic maximum width or height of the content. For text content this means that the content will not wrap at all even if it causes overflows. -MDN

You can change that to 100%. You can learn more on max-content here.

.comment_input {
  padding: 5px;
  margin: 5px;
  border-radius: 8px;
  border: none;
  width: 100%;
}

.profile-name {
  display: flex;
  align-items: center;
  column-gap: 5px;
}

.profile_image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.post {
  margin: 10px auto;
  width: 80%;
  border-radius: 3px;
  background: darkgray;
}

.post_padding {
  margin: 5px;
}

.post_comment {
  display: flex;
  align-items: center;
  gap: 5px;
}

.post_top {
  display: flex;
  justify-content: space-between;
}

.hover:hover {
  cursor: pointer;
}

.like-and-comment {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid white;
  border-top: 1px solid white;
  align-items: center;
  padding: 5px;
}

.view-more {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

.lk {
  display: flex;
  font-size: 14px;
  gap: 5px;
}

.right {
  border-left: 1px solid white;
  border-bottom: 1px solid white;
  border-bottom-left-radius: 30px;
  width: 5%;
  top: 5px;
  position: absolute;
  height: 120%;
  left: -20px;
}

.reply {
  display: flex;
  gap: 10px;
}

.reply-body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.user {
  /* TODO fix text overflow for when no spaces added*/
  background: grey;
  padding: 8px;
  border-radius: 20px;
  /*TODO max variable based on content*/
  width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.like-comment,
.reply_comment {
  cursor: pointer;
}

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- CSS only -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  <link href="/static/css/style.css" rel="stylesheet">
  <script src="https://js.stripe.com/v3/"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>

  <div class="post">
    <script id="counter40">
      1
    </script>
    <div class="post_padding">
      <div class="post_top">
        <div class="profile-name">
          <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
          <div>
            <div id="post_top"> jon </div>
            <div id="post_top2" class="location-time"><span class="time">in 3 hours</span><i class="fas fa-globe-americas"></i></div>
          </div>
        </div>
        <div id="three-dots" style="display: block" class="hover">
          <div class="dropdown">
            <div href="#" data-bs-toggle="dropdown"><i class="bi bi-three-dots"></i></div>
            <div class="dropdown-menu">
              <div id="post_edit_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_edit_modal(40)">
                <i class="bi bi-pencil-square"> Edit</i>
              </div>

              <div id="post_ban_modal" style="display: block" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_ban_modal(1)">
                <i class="bi bi-eye-slash"> Ban</i>
              </div>
              <div id="post_history_modal" style="display: none;" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_history_modal(1)">
                <i class="bi bi-clock-history"> History</i>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--this is really the post-->
      <div class="media ">
        <div class="text-break" id="post_body">hi</div>
        <img id="media_graphic">
      </div>

      <!--Finish this, need media link, media article-->


      <div class="like-and-comment">
        <div class="d-flex align-items-center">
          <i id="upvote40" class="fas fa-arrow-up hover" style="color: gray;" onclick="vote(40,1)"></i>
          <span id="upvote_count_badge40" class="badge bg-secondary">0</span>
          <i id="downvote40" class="fas fa-arrow-down hover" style="color: gray;" onclick="vote(40,0)"></i>
        </div>

        <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(40)">
          <i class="fas fa-award hover"></i>
        </div>

        <div class="dropdown hover">
          <div class="dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-share"></i></div>
          <ul class="dropdown-menu">
            <p id="post_crosspost_modal" class="dropdown-item" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_crosspost_modal(40)">
              <i class="bi bi-signpost-2"> Cross Post</i>
            </p>
            <p id="copytoclipboard" class="dropdown-item" onclick="copyToClipboard('http://127.0.0.1:5000/post/40')">
              <i class="bi bi-clipboard"> Copy Link</i>
            </p>
            <p id="save_post" class="dropdown-item" onclick="save_post(40)">
              <i id="save_post_icon40" class="bi bi-save"> Save</i>
            </p>
          </ul>
        </div>
      </div>

      <div class="view-more">
        <div class="hover" id="load_replies40" onclick="loadReplies(40,0)"></div>
        <div class="hover" id="comment_collapse"> 1 comments</div>
      </div>

      <div class="comment">
        <div id="reply_loader40">
          <!--Append Replies Here-->
          <div class="lk">
            <script id="counter46">
              0
            </script>
            <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
            <div style="width: 100%;">
              <div class="user">
                <div class="reply_author">jon in 6 hours </div>
                <div class="reply-body">word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;word-wrap : break-word; overflow-wrap: break-word;</div>
              </div>
              <div class="reply">
                <div class="d-flex align-items-center">
                  <i id="upvote46" class="fas fa-arrow-up hover" style="color: gray" onclick="vote(46,1)"></i>
                  <span id="upvote_count_badge46" class="badge bg-secondary">0</span>
                  <i id="downvote46" class="fas fa-arrow-down hover" style="color: gray" onclick="vote(46,0)"></i>
                </div>
                <div class="reply_comment" id="reply46">Reply</div>
                <div id="post_award_modal" data-bs-toggle="modal" data-bs-target="#siteModal" onclick="build_award_modal(46)">
                  <i class="fas fa-award hover"></i>
                </div>
              </div>

              <form id="submit_reply46" style="display: none;" autocomplete="off">
                <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
                <input class="comment_input" id="comment_input46" maxlength="1024" name="body" placeholder="Write a comment3" required="" type="text" value="">
                <div id="comment_input_error46" class="invalid-feedback"></div>
              </form>
              <div id="reply_loader46">
                <!--Nested Replies go here-->
              </div>
            </div>
          </div>
        </div>

        <form id="submit_reply" autocomplete="off">
          <div class="post_comment">
            <img class="profile_image" src="https://robohash.org/006cb570acdab0e0bfc8e3dcb7bb4edf?size=50x50">
            <input class="comment_input" id="comment_input40" maxlength="1024" name="body" placeholder="Write a comment" required="" type="text" value="">
            <div id="comment_input_error40" class="invalid-feedback"></div>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js" integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ==" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

</body>