.item-header {
  height: 50px;
  /*padding-right: 20px;*/
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
  /*flex-wrap: wrap;*/
}

I intend the flex layout. The avatar div occupies a separate column on the left (width:70px), and then the right side is the message content, accounting for the remaining 100% size (width:calc (the code above 100%-70px)), is the parent div style of div.)

the problem now is that other div under this div or too much text in the p tag will not automatically wrap lines, and setting white-space: normal; is invalid. How to solve this problem