CSS white-space: nowrap causes container to expand to fit all text

Question

I'm experiencing a very strange behavior in which a an element with overflow: hidden, white-space: nowrap, and a width: 50% forces its containing element to expand to fit all the text even though it is constrained by the width declaration (and not actually visible). Setting a specific width on the container or using overflow: hidden also does nothing to help. Setting an absolute value as width for the element in question however, fixes the problem, but i do not want to use absolute values.

Example: http://jsbin.com/loxuz/3 (Yellow box should only be 50% of grey box, but is expanding to fit all of the text in the blue box, even though that is restricted in width.)

Does anyone see anything obviously wrong here? Should the containing elements have a width, and could it have anything to do with the fact that I'm using percentages? I don’t feel that could be the case as the width should be inherited from containers upwards, right? And not be dictated form text elements downwards. The only explanation I can find is that white-space: nowrap is causing this. Removing this gives the container the right width, but also causes wrapping of the text, which I don’t want.

Does anyone know a solution to this, or have any insight? :)

Answer 1

A quick workaround for the issue with fieldsets not respecting the specified width is to add a min-width: 0 to the element:

i.e.

fieldset {
  min-width: 0;
}