Question

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

之类的东西

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

您还可以在 http://jsfiddle.net/vbj10x4k/231/

中查看示例

Answer 1

只需将max-width:100%设置为.parent，这样就可以考虑.container的宽度，然后依赖于flex，默认情况下您的元素会缩小。另外，请不要忘记元素本身to enable the element to shrink上的min-width:0。

.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的文档。

自动换行不会影响父级长非破坏文本的宽度

3 个答案: