Consider a scenario, where we have some child elements which need to be wrapped if horizontal space is not enough; But it need to cover full available horizontal space, even if it get wrapped.

Demo:

Test Item
Test
Testig Item
Container
Item 
Demo Item
Demo
Demo Item Demo Demo
Test Test Test Test
Item Item Item Item
Tssting Test
Test Item Demo
Demo  Testing
Testing Test Demo Test
Testing Demo Test
Demo 
Container
Testing Demo
Item Demo
Test Demo Item
Demo Item
Test
Demo Item Test Item Testing Item

Source Code:

<style type="text/css">
.code-snippet-demo-parent-div {
    list-style:none; margin:0; padding:0;
    display: -webkit-box;
    display: -moz-box;
   display: -ms-flexbox;
    display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row;
   -ms-flex-direction: row;
   -moz-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   -moz-flex-wrap: wrap;
   flex-wrap: wrap;
   width: 100%;
}
.code-snippet-demo-parent-div div {
   white-space:nowrap;
   border:1px solid #cccccc;
   padding:5px;
   -webkit-flex: auto;
   -moz-flex: auto;
   -ms-flex: auto ;
   flex: auto;
}
</style>
<div class="code-snippet-demo-parent-div">
   <div>test test</div>
   <div>test</div>
   <div>test testtest</div>
   <div>testtest</div>
   <div>test</div>
   <div>test test test</div>
   <div>test test</div>
   <div>test</div>
   <div>test test</div>
   <div>test</div>
   <div>test test</div>
   <div>test</div>
</div>
Discussion
4 X 8 =
** To prevent abusing comments from publishing, posted comments will be reviewed and then published!
 Mritunjay Kumar
Works at Mindfire Solutions

I mostly work with C#, ASP.NET, MVC, WCF, Web API, Entity FrameWork, MS Sql.