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/[email protected]/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>