<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溢出但是如果我在child2it中给出max-width则不会溢出父代。在这两种情况下，我都使用自动换行：break-word;
你可以在这里查看代码http://jsfiddle.net/vbj10x4k/
我需要知道它为什么会发生以及如何在不使用max-width / width到固定像素值的情况下解决它。我需要它具有响应性。
解决方法
不要为flex项设置最大宽度，而是使用最小宽度声明。
默认情况下，如果未设置最小宽度，则假定项目的内容最小宽度，并且弹性项目的宽度将永远不会更小。通过设置例如最小宽度50％，该项目将缩小至最多50％的flex父级。
.child2,.child3 {
min-width: 50%;
}
.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: 50%;
}
.child3{
background-color:powderblue;
padding:.5em;
word-wrap: break-word;
overflow-wrap: break-word;
min-width: 50%;
}
<div class="parent">
<div class="child1">
question
</div>
<div class="child2">
somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
</div>
</div>
请参阅上面的代码段或外部演示：http://jsfiddle.net/vbj10x4k/5/
