即使在使用 word-wrap 之后，flex item 也会因长单词而溢出容器

Question

 .parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}

.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;
  max-width:500px;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;

}

 <div class="parent">
 <div class="child1">
   question
 </div>
  <div class="child2">
      somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

  </div>
</div>

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child3">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
  </div>
</div>

The main issue with the above code is , child3 overflows but if I give a max-width in child2 it will not overflow the parent .在这两种情况下，我都使用了 word-wrap: break-word;

您可以在此处查看代码 http://jsfiddle.net/vbj10x4k/

我需要知道它为什么会发生以及如何在不使用 max-width/width 固定像素值的情况下解决它。 我需要它来响应。

原文由 Sachin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不要为弹性项目设置最大宽度，而是使用最小宽度声明。

默认情况下，如果没有设置 min-width ，则假定项目的内容最小宽度，并且弹性项目的宽度永远不会更小。通过将最小宽度设置为 40%，该项目将缩小到 flex 父级的最多 40%。

 .child2, .child3 {
  min-width: 40%;
}

 .parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 40%;
}
.child3{
  background-color:lightyellow;
  padding:.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 40%;
}

 <div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child2">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

  </div>
  <div class="child3">
    Works well with long URLs: <a href="#"> https://thisisadamnlongurlcontainingneitherhyphensoradditionalperiods.com</a>
  </div>
</div>

请参阅上面的代码片段或外部演示：http: //jsfiddle.net/vbj10x4k/5/

原文由 Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

而不是 word-wrap:break-word 使用 word-break:break-all

CSS

 .child1{
  background-color:mistyrose;
  padding:1em;
  word-break:break-all;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  max-width:500px;
  word-break:break-all;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-break:break-all;

}

这是工作小提琴链接 http://jsfiddle.net/yudi/vbj10x4k/3/

原文由 Gaurav Aggarwal 发布，翻译遵循 CC BY-SA 3.0 许可协议