即使在使用自动换行后,flex项也会因长字而溢出容器

Question

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

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

CSS

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

}

与上面的代码的主要问题是,child3溢出,但如果我给一个max-width在child2它不会溢出parent.在我使用的两种情况下word-wrap: break-word;

您可以在这里查看代码 http://jsfiddle.net/vbj10x4k/

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

Answer 1

不要为flex项设置最大宽度,而是使用最小宽度声明.

默认情况下,如果未设置最小宽度,则假定项目的内容最小宽度,并且弹性项目的宽度将永远不会更小.通过设置例如50%的最小宽度,项目将缩小到最多50%的flex父级.

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

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/

Answer 3

我正在使用这样的组合，它适用于 Chrome、Safari 和 Firefox。

.myOverflowableText {
  word-break: break-word; /* Chrome, Safari */
  overflow-wrap: anywhere; /* Firefox */
}

该站点表示 Chrome 和 Safari 支持断字功能https://caniuse.com/#feat=word-break。

但是我发现Firefox的解决方案应该overflow-wrap: anywhere在这个站点上：https : //developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

我对 IE 还不太确定...也许word-wrap: break-word;可以在 IE 上使用？

我的目标是这样的：

Hello this is some |
text. I am writing |
some text.         |
Especially long    |
words go to the    |
next line like     |
this. This is a    |
veryveryveryveryve |
ryveryverylongword |
.                  |

Answer 4

通过顺风添加min-w-0为我解决了这个问题。