CSS flexible box model and element heights

I'm using the flexible box module to position two div elements horizontally with the second div being flexible. To do so I'm using code similar to the following:

#container {
    display: -moz-box; -moz-box-orient: horizontal; display: -webkit-box; -webkit-box-orient: horizontal; }

#one, #two {
    background: rgb(230,235,240);
    padding: 20px;
}
#two {
    -moz-box-flex: 1; -webkit-box-flex: 1;
    margin-left: 10px;
}

The #two div is going to have more content than #one and, in turn, will likely always be taller. For some reason when using the flexible box module it extends the height of the #one div to match the height开发者_如何学C of #two. This isn't quite what I'm wanting. I need the #one div's height to be auto.

Suggestions on why this is happening, and/or how to fix it?

Here is an example: http://jsfiddle.net/brandondurham/3F7Vu/

And a screenshot:

I think you want to set box-align: start for #container.

BTW, after adding standard properties without vendor prefix, your code will also work in IE10 and Opera.

ACK. I can research for an hour and then post the question. IMMEDIATELY afterwards I figure it out.

-moz-box-align: start; -webkit-box-align: start; box-align: start;