Wrap the content of a flex column around another flex column

Question

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 set to a table cell wrap around:

Wrapping table content around a floating div across multiple rows

Would I have to redo all of this with a table, or is it possible to wrap a flex column around another?

.rowParent,
.columnParent {
  display: flex;
}

.columnParent {
  flex-direction: column;
}

.flexChild {
  flex: 1;
}

#flexymenu {
  flex-grow: 2;
  height: 100%;
}

.frame {
  display: block;
  margin: 0 auto;
}

.socialwrap {
  display: flex;
}

<div id="container" class="flexChild rowParent">
  <div id="rowChild592" class="flexChild">
    <h1></h1>
    <div class="socialwrap"></div>
  </div>
  <div id="flexymenu" class="flexChild columnParent">
    <div id="columnChild85412" class="flexChild rowParent">
      <div id="rowChild97758" class="flexChild"></div>
      <div id="rowChild52237" class="flexChild"></div>
    </div>
    <div id="columnChild59385" class="flexChild selected">
      <div class="frame">CONTENT</div>
    </div>
  </div>
</div>

Flexbox is not designed for wrapping elements around other elements. It can only align elements along columns or rows. Here's a more complete explanation: http://stackoverflow.com/a/34481128/3597276 — Michael Benjamin, May 06 '17 at 17:22

score 1 · Answer 1 · edited May 23 '17 at 12:02

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.

Thanks, that's really helpful to clear up my understanding! I'm trying to work out if border-images that "tetris" along with the shape of the element would work with floating the element like this? — Steven Ellen Starar, May 07 '17 at 13:33
That brings in another problem. You should post a new question with a focus on border images and floats so it can get full attention. — Michael Benjamin, May 07 '17 at 14:17

Wrap the content of a flex column around another flex column

1 Answers1

Linked