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

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 2

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

Answer 3

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: #ffffd;
  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.