html - Break elements onto new line with flex-grow and flex-wrap -

i have parent div (.tags) contains links , title.

the parent div set display: flex; flex-wrap: wrap;.

i link elements break onto new line, clearing title when wrap effect takes place.

i have tried using flex-grow: 1 on title, makes push links right of screen @ times, not after.

i have attached code have far, here link codepen

what trying achieve:

default - width of screen large enough nothing wraps , on 1 line >

wrapped - width of screen smaller, wrap has occurred - title has 100% width , links clear >

note number of links vary.

.container {    background: lightgray;    width: 100%;  }    .tags {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-flex-wrap: wrap;        -ms-flex-wrap: wrap;            flex-wrap: wrap;    -webkit-box-align: center;    -webkit-align-items: center;        -ms-flex-align: center;            align-items: center;    -webkit-box-pack: start;    -webkit-justify-content: flex-start;        -ms-flex-pack: start;            justify-content: flex-start;  }  .tags span {    margin: 1rem;  }  .tags .tag {    margin: 0.2rem;    padding: 0.2rem;    background: dodgerblue;    color: white;  }

<div class="container">    <div class="tags">      <span>tagged in:</span>      <a class="tag" href="#">capabilities</a>      <a class="tag" href="#">sales</a>    </div>  </div>

yes, change in structure.

wrap tags in own div flex:1. it expand automatically , tags drop second line when wrap occurs.

.container {    background: lightgray;    width: 100%;  }  .tags {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-flex-wrap: wrap;    -ms-flex-wrap: wrap;    flex-wrap: wrap;    -webkit-box-align: center;    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;    -webkit-box-pack: start;    -webkit-justify-content: flex-start;    -ms-flex-pack: start;    justify-content: flex-start;  }  .tags span {    margin: 0 1rem;  }  .tags .tag-wrap {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-box-flex: 1;    -webkit-flex: 1;    -ms-flex: 1;    flex: 1;  }  .tags .tag {    margin: 0.2rem;    padding: 0.2rem;    background: dodgerblue;    color: white;  }

<div class="container">    <div class="tags">      <span>tagged in:</span>      <div class="tag-wrap">        <a class="tag" href="#">capabilities</a>        <a class="tag" href="#">sales</a>      </div>    </div>  </div>

codepen demo