flex-grow: 0 still distributing remaining space, intended behavior?

[code-mc]

I was wondering if the current flexbox behavior is intended. When you use flexbox on the web, not setting any flex-grow values basically means "distribute the children inside the flexbox without altering their size". You can then use child items that contain text which will nicely show one after the other inside the flexbox, without any extra space between each item or any added "padding" to the text items.

When I'm using azul this doesn't seem to be possible, by default flexbox items are stretched to fill all remaining space. The only way to get around this issue is by explicitly specifying the width or height of the item, but this isn't feasible when you want to use this to "auto size" a text element according to its content.

Here are a few different flex-grow combinations:

All items no flex-grow specified / all items flex-grow: 0 (NOK)

Azul

Web

all items flex-grow: 1 (OK)

Azul

Web

1 item with flex-grow: 2 others flex-grow: 1 (OK)

Azul

Web

1 item with flex-grow: 2 others flex-grow: 0 / 1 item with flex-grow: 2 others no flex-grow specified (NOK)

Azul

Web

1 item without flex-grow others flex-grow: 2 (NOK)

Azul

Web

1 item with flex-grow: 1, others flex-grow: 2 (OK)

Azul

Web

Web reference can be found here: https://jsfiddle.net/Lwm8k5t9/3/

[fschutt]

I know, this is a very annoying bug that I've also run into. It should later be fixed with properly implementing flex-start and flex-end. Azul does have the information on how large the children have to be, it just doesn't use it yet.

Right now, children will always stretch, no matter what you do. The best you can do to manually work around this is by setting a max-width or exact width.

[fschutt]

Oh yeah, right now, everything below flex-grow: 1 is ignored. flex-grow: 0 is the same as flex-grow: 1 (to avoid divide-by-0 mistakes for now)

[fschutt]

This bug has been fixed (in 19a4276). flex-grow: 0 is now the default (as in a web browser) and you have to explicitly set flex-grow: 1 on the node that you'd like to stretch.

Note that there might still be bugs with text breaking / text layout in general, but this specific bug has been fixed. You can now construct the tab layout as you'd expect.