Word-wrap doesn't respect parent's width for long non-break text

Question

.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;
}
.msg{
  background-color:powderblue;
  max-width: 30vw;
  padding:.5em;
  word-wrap:break-word;
}

<div class='container'>
 <div class="parent">
    <div class="name">
      David
    </div>
    <div class="msg">
    How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? 

    </div>
  </div>
  <div class="parent">
    <div class="name">
      Hannah
    </div>
    <div class="msg">
    somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

    </div>
  </div>
</div>

Ideally , I want each msg to have max-width of 30vw, but at the same time respect parent's width. The first row behaves correctly, but the second row doesn't. If parent's width is resized to some value smaller than 30vw, the second msg will overflow.

I want something like max-width = min(30vw, parent's width)

NOTE: Container's width can be dynamically resized. I put width = 300px in the example to demonstrate a case where container cannot hold the second msg which somehow has width = it's max-width = 30vw.

You can also see the example at http://jsfiddle.net/vbj10x4k/231/

simply because there is no rule saying this .. the max-width is related to viewport unit — Temani Afif, Jun 15 '18 at 08:41
I would use `word-break:break-word;` instead - that should work better — Pete, Jun 15 '18 at 08:44
@TemaniAfif but why does the first message adjust to its parent's width? they have same className — Phuc Nguyen, Jun 15 '18 at 08:45
@Pete Thanks. However `word-break:break-word;` is not supported in Firefox :'( — Phuc Nguyen, Jun 15 '18 at 08:46
@PhucNguyen just use both - then it will work: http://jsfiddle.net/vbj10x4k/238/ — Pete, Jun 15 '18 at 09:07
because the first you have a logical line break to fit the container ...unlike the second one where there is no line break — Temani Afif, Jun 15 '18 at 09:16
@Pete Thanks. But in your example you already modified the `max-width` of `msg`. I want to set it to `30vw`, but still fit in the container if container's width is smaller than 30vw (like first row) — Phuc Nguyen, Jun 15 '18 at 09:22

Temani Afif · Accepted Answer · 2018-06-15T10:00:14.277

Simply set max-width:100% to .parent so this one respect the width of .container then rely on flex and your element will shrink by default. Also don't forget min-width:0 on the element itself to enable the element to shrink.

.container {
  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;
  max-width:100%; /*Added this */
}
.name{
  background-color:mistyrose;
  width: 70px;
  padding: 1em;
}
.msg{
  background-color:powderblue;
  max-width:30vw;
  min-width:0; /*addedd this*/
  padding:.5em;
  word-wrap:break-word;
}

<div class='container'>
 <div class="parent">
    <div class="name">
      David
    </div>
    <div class="msg">
    How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? How are you? 

    </div>
  </div>
  <div class="parent">
    <div class="name">
      Hannah
    </div>
    <div class="msg">
    somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

    </div>
  </div>
</div>

I updated the post to add note. I mean the container's width can be dynamically resized. So ideally I don't want to set fixed value to children's max-width :D — Phuc Nguyen, Jun 15 '18 at 09:30
@PhucNguyen but at least did you understand why the issu ? ... remove the max-width and you will see how the first one and second behave — Temani Afif, Jun 15 '18 at 09:37
no I don't understand. both `msg`s have the same class. first msg also has `max-width = 30vw`, but it still fits in the container, while the second one doesn't fit — Phuc Nguyen, Jun 15 '18 at 09:41
@PhucNguyen but remove the max-width and see what is happeing ... you will see that the first one is already fitting and the second one is overflowing TOO much ... so max-width simply reduced this second overflow — Temani Afif, Jun 15 '18 at 09:44
Perfect solution! Work on all browsers. I should have saved myself 1 day if I asked earlier. — Phuc Nguyen, Jun 15 '18 at 10:14

Max Hay · Answer 2 · 2022-01-05T09:59:09.823

If you do not need to support IE11 or safari, a simple solution would be to switch your word-wrap:break-word; with word-wrap: anywhere (working example)

If you need to support safari (but still not IE11), then instead replace word-wrap:break-word; with word-break: break-word. Note that word-break: break-word is deprecated in favour of word-wrap: anywhere.

I would also recommend switching word-wrap for its more commonly used alias: overflow-wrap. It will be more effective when used in a search term.

Also see: Difference between overflow-wrap and word-break?

score 0 · Answer 3 · answered Jun 15 '18 at 09:14

0

Just add :

word-break: break-all;

in .msg

answered Jun 15 '18 at 09:14

Charlie Rabiller

482
4
7

this will break anywhere. I want to preserve the whole word. – Phuc Nguyen Jun 15 '18 at 09:18

Word-wrap doesn't respect parent's width for long non-break text

3 Answers3

Linked