Question: I have this inline javascript, is there any way it could be made unobtrusive? thanks.

```
<a href="/uploads/status/image/52/Zombatar_1.jpg" onclick="displayLightBox(this); return false;">
    <img alt="Thumb_zombatar_1" src="/uploads/status/image/52/thumb_Zombatar_1.jpg">
</a>

```

Answer: 
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.
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](https://developer.mozilla.org/en/CSS/box-flex), 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](http://dabblet.com/gist/1881966). 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; }

```