html - 自动换行不考虑长不间断文本的父级宽度

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 的某个值，second 消息将溢出。

我想要类似max-width = min(30vw, parent's width)

注意:容器的宽度可以动态调整。我在示例中放置了 width = 300px 以演示容器无法容纳第二个 msg 的情况，该消息以某种方式具有 width = 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>