Strange full width bug in Firefox 2

Fiefox (unlike IE6, Opera, Safari and Chrome) behaves strangely when trying to figure out the width of certain embedded elements.

By default, a DIV or a LI, as block elements, should take up 100% of the available horizontal space. However, in a certain combination of elements, Firefox 2 seems to get the size wrong. The simplest case I could find was the following:

CSS

html,body,ul{
  margin:0;
  padding:0;
  border:0;
}
div#big{
  border:1px solid red;
}
div#small{
  min-width:20%; max-width:30%; /* USE width:25%; */
  float:left;
  border:1px solid black;
  overflow:auto; /* USE visible */
}
.element{
  border-bottom: 1px dashed black;
}

Markup

<div id="big">
<div id="small">
<div class="element">text</div>
<div class="element">longer-text</div>
<ul class="element"><li>list</li></ul>
</div>
</div>

What happens is that the elements classed as "element" will not take up the whole width of div.small. What is even more interesting is that all three of them have the very same width -- the width of the widest among them.

The phenomenon disappears if:

- one uses a normal "width" property on div#small (even if it is a percentage)
- if div#small's "overflow" is "visible" instead of "auto" or "hidden"
- div#small is not floated.

I have not tested this on newer versions of Firefox.