There is no automatic line wrapping when there is too much text in the div in the flex layout.

.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

Node.js javascript html css html5

Mar.31,2021

add:
overflow-wrap: break-word;
word-wrap: break-word; / compatible with IE /
try, notice the top parent element plus:
overflow:hidden;
you refer to.

because you are typing in English, and there is no space in the middle, it is a word by default, so you have to add word-break: break-all; forced line breaks to it, no matter what it is, it will be opened for you

Previous: Could you tell me how to convert an array in this format into an object?

Next: Why can't I open this page?