Responsive breadcrumbs with max crumb width - html

Question

I'm attempting to create a responsive breadcrumb trail where the overall trail width is restricted and each crumb width is also restricted. Additionally, I'd like to allow for the last crumb to take up any additional space. I've managed to put the following together that mostly demonstrates what I'm going for, but the JQuery solution is less than idea:
$(document).ready(function() {
var $crumbs = $(".container .breadcrumb li");
var overallWidth = $(".container").width();
var crumbWidth = (100 / $crumbs.length) + '%';
$crumbs.css('max-width', crumbWidth);
var totalWidth = 0;
$crumbs.each(function(elt) {
var width = $(this).width();
totalWidth += width;
});
var adjustment = overallWidth - totalWidth;
var $lastCrumb = $(".container .breadcrumb li:last");
var lastCrumbWidth = $lastCrumb.width();
lastCrumbWidth = lastCrumbWidth + adjustment;
$lastCrumb.css('max-width', lastCrumbWidth - 25);
});
.container {
border: 1px solid;
width: 70%;
}
.container .breadcrumb {
padding-left: 10px;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.container .breadcrumb li {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.container .breadcrumb li:before {
color: blue;
content: ">";
margin-right: 5px;
}
.container .optional,
.container .optional > div {
display: inline-block;
}
.hidden {
display: none !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Breadcrumb Truncation with Ellipsis</h1>
<div class="container">
<ul id="bc1" class="breadcrumb">
<li>Home blah blah</li>
<li>about blah blah blah</li>
<li>super cali fragilistic expialidocious</li>
<li>super duper cali fragilistic expialidocious</li>
<li>UBER super duper cali fragilistic expialidocious</li>
</ul>
<div class="optional">
<div class="hidden"><button>click me</button></div>
<div class="hidden"><span>extra info</span></div>
</div>
</div>
I'm sure this can be accomplished in a pure CSS way, but the solution is alluding me and probably beyond me.
Additionally, ideally this solution would also accommodate the hiding and showing of various elements via the "hidden" that are in the "optional" section.
UPDATE:
I've made some progress with the following, but it still isn't ideal since I'm blindly using a fixed max-width:
.truncate {
max-width: 250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:last-child {
max-width: 100%;
}
}
Here's a jsfiddle demonstrating some of the desired functionality.