Question

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 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:

Answer 1

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.