Flex word wrap?

  css3, question

Question 1. flex layout, why did it wrap? Question 2: How to write the layout gracefully (the layout below)

Ps: On the left is a string of words and on the right is a similar line segment. The left word has no fixed width


The above image is ui. The following figure is html.


<!  DOCTYPE html>
 <meta charset="utf-8">
 <style type="text/css">
 display: flex;
 .itemHeader div:first-child{
 /*display: inline-block;  */
 margin-right: 2em;
 .itemHeader div:last-child{
 border-bottom:1px solid #000;
 /*display: inline-block;  */
 width: 100%;
 < div class="itemHeader"><div > building drawings < /div><div></div></div >

width: 100%;changeflex:1To allow the segment to occupy the remaining width.