Make middle of three elements in row fill remaining space - html

Question

I need three elements. Two elements on either side, and one text element in the middle. The text in the middle needs to be left-aligned (floating) to the first element.
I need the text to truncate with ellipsis when the page is shrunk. But after specifying overflow styles, when the page is shrunk smaller than the width of the three combined they start moving to new positions and moving out of the parent container.
## This is sample text! ## would turn into ## This is samp... ## (where ## are the side elements) if the width could not accomodate all of the elements.
.container {
height: 30px;
background-color: #ff0000;
}
.container > .container-first {
display: inline-block;
background-color: #0000ff;
width: 20px;
height: 30px;
float: left;
}
.container > .container-second {
display: inline-block;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
float: left;
}
.container > .container-third {
display: inline-block;
background-color: #00ff00;
width: 20px;
height: 30px;
float: right;
}
<div class="container">
<div class="container-first"></div>
<div class="container-second">This one has sample text!</div>
<div class="container-third"></div>
</div>
Note that this answer did not help because it just moves each child to its own line.

Answer 1

I am using a flexbox for the .container and set flex: 1 for .container-second. This way all floats can be removed and the document flow stays intact.
Hope this helps.
.container {
height: 30px;
background-color: #ff0000;
display: flex;
}
.container>.container-second {
flex: 1;
}
.container>.container-first {
display: inline-block;
background-color: #0000ff;
width: 20px;
height: 30px;
}
.container>.container-second {
display: inline-block;
line-height: 30px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.container>.container-third {
display: inline-block;
background-color: #00ff00;
width: 20px;
height: 30px;
}
<div class="container">
<div class="container-first"></div>
<div class="container-second">This one has sample text!This one has sample text!This one has sample text!This one has sample text!This one has sample text!</div>
<div class="container-third"></div>
</div>

Answer 2

This can done easily by using bootstap grid and CSS overflow and text-overflow property.
You need to link bootstrap file in head section .
Check this out.
.ellipsis {
text-align: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-xs-3">
<div>Hello Hello</div>
</div>
<div class="col-md-4 col-xs-6">
<div class="ellipsis">Hello Hello Hello Hello Hello Hello </div>
</div>
<div class="col-md-4 col-xs-3">
<div>Hello Hello</div>
</div>
</div>
</div>