o item flexível excede o contêiner devido à palavra longa, mesmo após o uso da quebra de linha
<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;
}
O principal problema com o código acima é,child3
transborda, mas se eu der umamax-width
nochild2
não vai transbordarparent
. Nos dois casos eu useiword-wrap: break-word;
Você pode verificar o código aqui http://jsfiddle.net/vbj10x4k/
Preciso saber por que isso acontece e como resolvê-lo sem usarmax-width/width
para valores de pixel fixos.Eu preciso que ele responda.