Lack of CSS grid support makes complex layouts impossible

Photoshop
, ,
1

I’m back with panel layouts and CSS flex…

Here’s the example fiddle

Everything seems fine, except two issues:

  • Buttons in rows do not wrap (even if row has plenty of space at the bottom), unless row becomes full viewport width:

    image
    image747×635 24 KB

  • Buttons in columns do not shrink when viewport shrinks (if I make parent row of that column display:block, then buttons shrink :thinking:):

    image
    image143×1167 14.4 KB

I believe with grid these wouldn’t be an issue. Any CSS gurus here?

2

check flex-wrap
and flex-grow, min-height, max-height

also consider using media queries and assigning different styles to different panel widths.

3

I did and I’m already using these. Doesn’t help

Can’t really do that, because buttons labels might be both short and very long, so it should just shrink, but it doesn’t in columns if column holders is flex row (shrinks if that row is block)

4

It’s not clear to me what you want the layout to look like in your examples. What should the Button 5, 6, 8, and 9 areas look like?

Also it might be useful to understand what this complex layout is trying to serve – what does the UI you’re trying to create look like?

Flexbox is not Grid, and there are things one or the other is better at. That said, many complex layouts at Adobe and in 3P plugins have been accomplished with Flex and the existing layout models, but it may take some additional work when compared to Grid. This is why I’m asking for your desired UI layout – sometimes you may need to invoke more than just flexbox to get what you’re after.

5

So in the first image, if I try to shrink viewport right past that width, Button 5 and 6 rows drop down bellow instead of wrapping buttons (like they do in second screenshot when row takes full viewport width). I’d want buttons to wrap if they can’t fit in a single row the same as what happens when row is in full viewport width.

For the second image, Button 1/2/3/4/8 columns do not allow buttons to shrink like rows (5, 6, 9) do. Buttons labels should be truncated with ellipsis, like in rows, but instead they stay the same smallest size.

I’m fine with adding some other solutions, but I need this to be responsive as much as possible with as less HTML as possible. I don’t see how media queries would help here, because buttons can have any length labels and rows/columns can have any number of buttons, which I don’t know…

6

So… As for the row wrap I think there might not be a good way to solve this.

As for the second part of the question - I’ve updated the Fiddle to make it as simple as possible.

  • R (Row) - Buttons shrink
  • C (Column) - Buttons shrink
  • M (Mixed) - Buttons in columns inside a row do not shrink

Any idea about this one? :frowning:

7 
.column {
    min-width: 0;
}

should solve the second problem.

1 Like
8

OMG, it does solve :open_mouth: Thank you so much for such a simple solution
Why would column (in a row specifically) have some default min-width? Never would’ve figured this out by myself

If it were so simple with the first issue… :slight_smile:

1 Like
9

An initial setting on flex items is min-width: auto . This means that a flex item, by default, cannot be smaller than the size of its content.

Therefore, text-overflow: ellipsis cannot work because a flex item will simply expand, rather than permit an overflow. (Scroll bars will not render either, for the same reason.)

To override this behavior, use min-width: 0 or overflow: hidden

I probably googled “flex child overflowing parent width” 10 times in my life already, because I always forget about this fix :smiley:

Regarding your first problem:

I don’t think either that there’s a solution for that, other than controlling the wrapping with media queries.
If I understand the problem correctly, you have two wrapping elements which are “in competition” with each other. While resizing the viewport, the browser calculates the necessary space and checks it against the available space. Once there isn’t enough space, it has to decide whether it will wrap the outer container or the contents of the inner row.

Unfortunately, there’s no way to set wrapping priority, so you can’t control the order in which elements wrap.

I found this example, which seems to show the opposite behavior of what your code does (inside wraps before outside). This makes me assume that wrapping simply happens in chronological order.

1 Like
10

Thank you so much for this detailed explanation. Will check that example and maybe I could make use of it :slight_smile: