I'm currently working on a Wordpress site, incorporating flexbox into my design. I have set up two columns where child 1 should occupy 75% of the page width and child 2 should take up 25%. However, I've noticed that when the content in child 1 is lengthy, it ends up stretching the div to 100% width instead of wrapping inside. The issue can be visualized in the jsfiddle example linked below. Any suggestions on how I can address this problem? I'm still quite new to this. Thanks!
http://jsfiddle.net/luchtrat/jnys3u5p
body *{border: 1px solid red;} /* just to preview what's happening */
#parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
padding: 10px;
}
#child_1 {
flex-grow: 2;
}
#child_2 {
flex-grow: 1;
}<div id="parent">
<div id="child_1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque aliquam dapibus volutpat. Proin suscipit massa at ipsum semper, et pretium ante bibendum. Vivamus justo erat, aliquet maximus turpis quis, sagittis tempor lectus. Nullam eleifend, nisi
vitae condimentum elementum, arcu sapien finibus nisl, sit amet euismod nibh felis quis turpis. Fusce nec egestas sapien, non ultricies ligula. Aliquam ac libero elementum, rhoncus massa quis, posuere massa.
</div>
<div id="child_2">Fusce nec egestas sapien.</div>
</div>
<div id="parent">
<div id="child_1">Lorem ipsum dolor sit amet.</div>
<div id="child_2">Fusce nec egestas sapien.</div>
</div>