Log in / Register

Forum › Bugs

Flexbox with flex-wrap: wrap; (Redux)

grexican
I saw a few messages about this issue on the bugs forum already, but they were a few years old and the users found workarounds by using flex-wrap: nowrap;

In this case, I CANNOT use that solution. I really do need to use flex-wrap: wrap;

Using bootstrap, my test HTML is this simple:

<p>Lorem Ipsum - START</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<p>Lorem Ipsum</p>
<div style="display: flex; flex-flow: row wrap;" class="row">
<div class="col">
<p>ROW Lorem Ipsum - START</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum</p>
<p>ROW Lorem Ipsum - END</p>
</div>
</div>

Nothing special. But when the row overflows the page, the content is just truncated and lost. I never see the ROW Lorem Ipsum - END text. Also, just before the row, a page break is created even though the content isn't explicitly set to break before, nor is it set to avoid breaks in the middle.

Changing to flex-wrap: nowrap; DOES fix the above issues, but I have some responsive grid layouts that I simply cannot change to nowrap. I really do need the wrap, e.g. side-by-side content on medium+ resolutions with: col-12 col-md-6.

Thoughts?
markbrown
Hi,

We intend to improve our flexbox implement further, but we're working on other things right now.

May I ask if in your multi-row layouts the flex containers are typically auto height, or do they have a definite height specified? It will be useful for us to know that for planning future changes.

Thanks,
Mark
grexican
No, not defined heights. I'd just assume it would break the same as a TD would break. If you allow break inside, it would show as much content as it can and then break to the next page, keeping the same width as it had before.

Can you think of any way I can pull this off? Many rows I can turn off wrap, but there are plenty I can't, so I need to find _some_ solution or else I'll have to abandon Prince, and I'm like 99% of the way complete with my solution :(
grexican
@Markbrown would it be possible to do something similar to what I said above? I know it's not 100% flexbox, but i think it'd fit a large percentage of flexbox needs (moreso than flat-out dropping content like it does today) and I'm guessing the implementation wouldn't be that bad.

What I'm suggesting is, use flex to determine widths, but after it wraps, treat it more like a table layout.

I've seen your table support and that works great. A lot of bootstrap row support is for responsive grids, and once it's in that grid layout, it's just a pretty standard flow.

The one solution I'm leaning towards now is using JS to change CSS properties to a grid layout. I know, for example, when I'm printing to PDF that I'm using the boostrap "md" size. I could evaluate my flex layouts and convert it over to grid style. That's going to be a huge pain to do though! I'm sure I'm going to royally mess it up.

So before I go and do something crazy like that, I wanted to ask if doing the above as a stepping stone to full flex support could make sense for you.

Thanks!
markbrown
Yes, something like this makes sense to me as a stepping stone. I can't promise when we will be able to work on that, however.

Mark
markbrown
Hi,

The latest build includes support for fragmented multi-row flex containers, which means that it should now be able to handle the example above. Please let us know if you encounter any further problems.

Mark
grexican
That's great news! I'm currently using DocRaptor, so I won't be making the jump until they upgrade their version. But I'll see if I can test out my use case above and see what it looks like. Thanks for keeping me in the loop!