Why is div inside d-flex overflowing?

Question

I'm creating a chatting application. This is my code for rendering a single message.

The d-flex maintains perfect width relative to its parent. However, the message-content-holder exceeds the d-flex parent whenever the message get too long. Any ideas on why this might be happening?

.message-content-holder {
  background: pink;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class='d-flex align-items-center justify-content-end'>
  <div class='message-content-holder'>
    <div class='message-content'>
      {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} {message} 
    </div>
  </div>

  <div class='message-icon'>
    <img src="https://via.placeholder.com/45" />
  </div>
</div>

Have you tried setting the `max-width` on the `message-content-holder`? Eg: `max-width: calc(100% - 45px);` — Richard Deeming, Jan 19 '22 at 12:29
https://stackoverflow.com/questions/1638223/is-there-a-way-to-word-wrap-long-words-in-a-div — Alaksandar Jesus Gene, Jan 19 '22 at 12:49
@RichardDeeming of course, it works; but it doesn't seem to be a solution to this. Just a workaround. — Ibrahim Farooq, Jan 19 '22 at 13:09
I've created a demo snippet from your code. Does it show the problem? — isherwood, Feb 03 '22 at 20:22
I asked because to me it _doesn't_ show what you describe. `.message-content-holder` is not larger than the `.d-flex` around it on either axis. — isherwood, Feb 17 '22 at 22:26
@IbrahimFarooq you can add a little horizontal margin (like `mx-3`) to fit the inside div. — Douglas Vicentini, Dec 26 '22 at 18:59

Why is div inside d-flex overflowing?

0 Answers0