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

question

somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

question

somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

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;

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