Flexible Width cards inside Linear Panel

Anvil Q&A
1

What I’m trying to do:
I would like to have a Linear Panel with rows of cards but the cards would have a flexible width depending on the content inside. The Cards have flow panels inside them. Content in the flow panels is shown or hidden depending on user preference

What I’ve tried and what’s not working:
I have tried many variations of this role

The problem is that the same role gets applied to flow panels within the panels and then there are way too many scroll bars.

Also tried to use some of the horizontal scrollable repeating panels but none really fit.

Clone link:
I will create a dummy app to clone shortly.

2

So here is a clone showing some of the behaviour I want to create.

https://anvil.works/build#clone:B4WHQ2TN6MYWW72Y=AH623WTPVQYMA3HFSQIYVYJK

The card is shrinking to the appropriate size and grows as required using the following role

.anvil-role-float {
  float:left;
  flex-wrap: nowrap;
  overflow: visible;
}

But I cannot get the linear panel to have a scroll bar that actually works. And for some reason, the card still wraps - it seems like I am missing something simple here. The bottom three rows should still be a single line of buttons that overflows the panel and can be navigated by horizontal scrolling.

image
image1005×630 28.3 KB