Word-wrap doesn't respect parent's width for long non-break text
问题 .container { /* Container's width can be dynamically resized. I put width = 300px in the example to demonstrate a case where container's width couldn't hold second msg */ width: 300px; display: flex; flex-direction: column; align-items: flex-start; padding: 1em; background-color: blue; } .parent{ display:flex; flex-direction:row; flex-wrap:nowrap; padding:1em; background-color:red; box-sizing:border-box; margin-bottom: 1em; } .name{ background-color:mistyrose; width: 70px; padding: 1em; }