Stretch parent node to its content width

Question

<div style='width:100%;background-color:green;padding:10px;'>
  <div style='width: 5000px;background-color:red; padding:5px;'>
  </div>
</div>

http://jsfiddle.net/8xqwW/2/

Outer div is fixed at 100% of window, while inner one is rendered at full width.

Is there any way to make outer div to stretch to the inner one's width (if it is big) while remaining at at least 100% of the window (if inner div is small)?

I cannot use overflow-x:scroll - only window scroll is allowed. Also min-width:100% didn't solve my problem.

If no solution exists I can use JS resize event.

Answer 1

try display:table for outer div