对于长的非中断文本，自动换行不尊重父级的宽度

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>

理想情况下，我希望每个msg都有30vw的最大宽度，但同时尊重父母的宽度。第一行表现正确，但第二行表现不正确。如果父级的宽度调整为小于30vw的某个值，则第二个msg将溢出。

我想要像max-width = min(30vw, parent's width)这样的东西

注意：可以动态调整容器的宽度。我在示例中放置了宽度= 300px，以演示容器无法容纳第二个msg的情况，该msg以某种方式具有width = it的max-width = 30vw。

你也可以在http://jsfiddle.net/vbj10x4k/231/看到这个例子

Answer 1

只需将max-width:100%设置为.parent，这样一个尊重.container的宽度然后依赖flex，你的元素默认会缩小。也不要忘记元素本身min-width:0上的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>

Answer 2

只需添加：

word-break: break-all;

在.msg

Answer 3

另一个简单的解决方案是切换你的

word-wrap:break-word;

同

word-break: break-word;

你可以看到Seems to work，而不是100％确定这里有什么区别 - 可能值得查看W3Schools的文档。