Making Chrome-like tab resize with pure css - css

Question

I am trying to create tabs that resize a bit similar to how Chrome tabs does. But I am not sure how and if it is even possible to do without JavaScript.
I don't care about browser support, I only want to see if it can be done with pure html and css/css3.
Here is the spec:
The tabs are never wider than the text inside them
When the right most tab reaches the right side of the window on resize, the tabs should start shrinking (ideal is that this happens to the widest tab first)
the active tab should never shrink
As the tabs shrink, the text should be hidden by ellipsis
the tabs will stop at a min-width that I set (so they can't go to zero width).
Can this be made with something like display: box; and box-flex: 1; properties perhaps? I haven't managed to make it yet. I have already made it with JavaScript. But the performance is not as good as I want it to (this is a BIG wep app).
So, any CSS-Gods out there up for it? If there is a way to do it with very limited use of JavaScript, I am also interested.
Thanks all!

Answer 1

You can get pretty close to Chrome's actual behavior with the flexbox...
body {
font: 12px/130% 'Lucida Sans', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}
ul {
background-color: #eee;
display: -webkit-box;
padding: 10px 10px 0 10px;
}
ul li {
-webkit-box-flex: 1;
background: #ddd;
padding: 10px 15px 6px 15px;
white-space: nowrap;
overflow: hidden;
max-width: 150px;
min-width: 50px;
border: solid #ccc 1px;
border-bottom: none;
border-radius: 5px 5px 0 0;
text-overflow: ellipsis;
}
http://jsfiddle.net/a656n/
​However, your specs are impossible in CSS only. I'd also suggest that keeping the active tab 'unshrunk' breaks conventions because your tabs will change position every time you click on them.

Answer 2

I improved on Duopixels anwer by using one extra <span> element and display: table-cell instead of the flexbox implementation. This way you achieve better cross-browser support/fallback. http://jsfiddle.net/w34nm/ (Tested in IE8+, Firefox 10, Chrome 17)
PS: you should probably use JavaScript to set the right width values on the list items

Answer 3

Well, first of all, your desired functionality is not how tabs in Chrome work, they simply remain a fixed size until there is not enough room, and then they shrink uniformly to fit. (According to MDN, You could accomplish this:
To make XUL elements in a containing box the same size, set the
containing box's equalsize attribute to the value always. This
attribute does not have a corresponding CSS property.
)
Also, a visual representation of what you are looking for would be very helpful, I found some of the demands rather confusing.
Nonetheless, I've scrapped together this. Let me know if it is at all close.
ul{
display: -webkit-box;
width:500px;
background:lightgray; text-align:left;}
li{background: gray; text-align:center; height:24px; -webkit-box-flex: 1; min-width:30px; max-width:100px; overflow:hidden; text-overflow: ellipsis; }