[css-flexbox] Width computation for flex items with margin

Hello everyone,

I have a question concerning the width computation of flex items with margin.

What I am trying to do is a grid using flexbox.
I want to put (e.g.) 4 divs inside a flex container, where each flex item consumes equal space and have a margin in between.
I want to be able to span elements over two "cells".
The grid and the grid items should grow/shrink with the size of the container element.

It looks like this could be easily done with flexbox.

Unfortunately, I can't get it to work when I use margins.

I created a JSFiddle to illustrate the problem:
http://jsfiddle.net/MWygB/
The first row is a "reference" row build without flexbox using floats...
The second row is using flexbox with 4 items, each flex:1.
The third row is using flexbox with 3 items, where the first item is flex:2.
The problem is in the third row - I was expecting the first item to have the same width as the first two items in the second row.

Is this a browser bug, a gap in the specification, is this not possible with flexbox or am I simply doing something wrong?

Thanks in advance!

Regards
Soenke

-- 
OIO - Orientation in Objects GmbH
Weinheimer Straße 68
68309 Mannheim
Telefon: +49 621 71839-0
Telefax: +49 621 71839-50
E-Mail: soenke.sothmann@oio.de
Internet: http://www.oio.de

Amtsgericht Mannheim
HRB 38348
Geschäftsführer: Tobias Kieninger, Dirk M. Sohn

Received on Thursday, 4 April 2013 10:02:07 UTC