Wrap The Content Of A Flex Column Around Another Flex Column

I'd like the CONTENT flex column to wrap around the left-hand rowChild592 column. I have this: I'd like it to look something like this: I saw an answer here about making a div s

Solution 1:

In flex layout, elements can be aligned along columns or rows. A flex item cannot span between both columns and rows, which could allow the content of one item to wrap around another item. So, flexbox is not a good option for achieving your layout. Read more.

In grid layout, elements can span across columns and rows. A grid item can be configured to take up as many rows and columns as desired, which would allow for the content of one item to wrap around other items, except for one limitation currently in place: The grid area must be rectangular.

This behavior is defined in two parts of the spec.

9. Placing Grid Items

Every grid item has a grid area, a rectangular set of grid cells that the grid item occupies.

---

7.3. Named Areas: the grid-template-areas property

If a named grid area spans multiple grid cells, but those cells do not form a single filled-in rectangle, the declaration is invalid.

Note: Non-rectangular or disconnected regions may be permitted in a future version of this module.

---

So, for the foreseeable future, tetris-shaped grid areas are not possible, which would make your layout simple and easy.

To wrap your text around images, stick to the good ol' float property. After all, this is exactly what it was designed to do.

And if you're thinking about using float inside a flex or grid container, it won't work. Floats are ignored in both a flex formatting context and grid formatting context.