How can an element with text shrink to its minimum size [duplicate]

You are seeing a flex-container with 3 flex-items. How can I let the middle box shrink to its minimum size depending on the width the text requires? I want to add two decoration dashes on the left and right of the title which should be as close as possible to the imaginary-text-box sides so there is no space (red). Stil, I want the text to break when I make the page smaller...