Flex: newline too long

Question

I thought the following usage of css flexbox could be achieved.

The layout has the original 2 divs next to each other. The left contains a group of icons and has a fixed width. The right one contains text that can be potentially quite long.

Is there a way how to make using only css (especially flexbox) that when the text is too long, the div will split into a new line (under the first div)?

Check out the following image.

Answer 1

You can do this by creating a container with display: flex; and flex-wrap: wrap; . Then enter the overflow text a flex-grow: 1;

 .container { display: flex; flex-wrap: wrap; align-items: center; } .fixed-width { width: 200px; border: 1px solid red; } .fixed-width, .overflow-text { display: flex; justify-content: space-around; } .overflow-text { flex-grow: 1; border: 1px solid red; } 

 <div class="container"> <div class="fixed-width"> <p>Hi</p> <p>Hi</p> <p>Hi</p> <p>Hi</p> </div> <div class="overflow-text"><p>This is some text that is really long.</p></div> </div> 

Jsfiddle