NO BUG: Tabs (nestable) doesn't support flex-grown/flex-shrink

Browser: Chrome 118.0.5993.89
OS: Windows
URL: Link to a page that illustrates this issue

Once you set a flex-grow or/and flex-shrink within the content of a nestable tab it stops working and will just add the second tab’s content underneath.

EDIT; Once you make any changes to a block’s main settings the tabs completely stop functioning.
For example:

Hi Roel,
Thanks so much for your report!

The tab content is shown and hidden with display: block and display: none. If you set it to display flex, it will always be shown (see screenshot).

Instead of applying the flex setting directly to the tab content, you can wrap your content elements again with a block or div, and make the settings there. This way the functionality of the tabs is preserved.

Best regards,
timmse

Hi timmse, thank you for your quick reply.
I’ve wrapped my existing flex content in a block, but this still doesn’t seem to solve the issue:

EDIT: Wrapping the original block in a new one doesn’t solve the issue, you have to wrap the content.

That’s what I meant with “wrap your content elements” :slight_smile:

1 Like