Middle span element with auto width and overflow hidden - css

Question

Update: Using flexbox is an option, but a solution that supports legacy browsers would be preferred.
It should be an easy task, but now I am searching for hours for an solution without success. I would like to create an navigation where the middle span "Very long headline 1 2 2 3 4 ..." does not do a line break and grow vertically when the view port size is getting very small. Content that does not fit into the span header-title should be hidden.
For a better understanding I attached two graphics and a jsfiddle example.
Current:
Target:
jsfiddle:
https://jsfiddle.net/herbert_hinterberger/ofu8c8rn/3/
<div class="container-fluid">
<div class="row row-offcanvas row-offcanvas-left">
<div class="col-xs-12 col-sm-9">
<div class="row" id="header"> <!--header-->
<div class="col-xs-12">
<span id="header-menu-trigger" class="pull-left hidden-md hidden-lg" data-toggle="offcanvas">
<i class="fa fa-bars fa-3x"></i>
</span>
<span>
<h3 id="header-title">Very long headline 1 2 3 4 5 6 7 8 9 10 </h3>
</span>
<span class="notification-container pull-right">
<h3 class="notification">8</h3>
</span>
</div>
</div> <!--/header-->
</div> <!--/offcanvase-->
</div> <!--/row-->

Answer 1

Try flex. Flex will ensure that the middle element stretches/shrinks to the available space. Also, remove pull-right on the notification-container div.
https://jsfiddle.net/5s3v55px/
Add this CSS
.my-flex{
display:flex;
}
.flex-1{
flex:1;
}
HTML Changes
<div class="col-xs-12 my-flex">
<span id="header-menu-trigger" class="pull-left hidden-md hidden-lg" data-toggle="offcanvas">
<i class="fa fa-bars fa-3x"></i>
</span>
<span class="flex-1">
<h3 id="header-title">Very long headline 1 2 3 4 5 6 7 8 9 10 </h3>
</span>
<span class="notification-container">
<h3 class="notification">8</h3>
</span>
</div>