Question

I’m using the flexible box layout successfully but have a need to put an element positioned absolutely inside one of the boxes.

I’ve read http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/#flex and in particular: Flexibility only applies to elements in normal flow. As absolute and fixed positioned elements are not in flow, any flexibility or flexgroup specified on them is ignored.

The specific use is to embed Google Maps, which has DIVs positioned abolutely and is more or less out of my control. The end result is that the DIV becomes positioned relative to the first non-box element that contains my flexible box layout instead of the box element I put it in. I’m assuming that this is because it was the last element with a real position.

I understand why this is happening, but does anyone know of workaround to put absolutely positioned elements inside a flexible box element such that the absolutely positioned element’s position is relative to the flexible box element. I think that makes sense.

O.

Answer 1

I think the only work-around is using an <iframe> – it can be positioned using flexible box layout while its contents (Google Maps) use absolute positioning.