How to make div with text to expand if the text does not fit there

My page: page

Html code for message block:

<div class="message-body row">
      <div class="text-box ">
        <p>{{message.text}}</p>
      </div>
    </div>

Css styles:

.text-box {
  display: flex;
  margin-left: 10px;
}

message-body does not have any styles from css

>Solution :

.text-box { display: flex; margin-left: 10px; word-break: break-all; }