Making Chrome-like tab resize with pure 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 ca

Answer 1

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; }