How do I make parent with nowrap inherit width of inline-blocks

Question

I'm having trouble getting a parent to inherit the width of it's children. The jsfiddle is here http://jsfiddle.net/4mk3S/

right now I just have an outer div with

    white-space: nowrap;

and children divs with

    display: inline-block;

I would like the outer div to inherit the width of it's entire group of children. Any help would be really appreciated, thanks!

Code :

<div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

.outer {
    white-space: nowrap;
    padding: 10px;
    background: green;
}

.inner {
    display: inline-block;
    width: 1000px;
    height: 100px;
    background: red;
}

Answer 1

add display: inline-block; to the parent also

inline-block forces the container to wrap all of its children while block (the default for div) sets the width to that of the parent

Updated fiddle

Relevant code to be changed

.outer {
    white-space: nowrap;
    padding: 10px;
    background: green;
    display:inline-block;
}