How to have a pn.Row() of pn.Card() instances wrap with respect to the browser view portal?

Currently in my application I am rendering a row of card instances just fine. However, the row does not wrap to the width of the browser window. Instead I get a scrollbar whether scroll=True or scroll=False.

import panel as pn

from traitlets import HasTraits, Int, Unicode, default, Set, List, Any
from traitlets.config import Application

from feelings_and_needs.nycnvc.lists import feelings

from loguru import logger


class NVC(HasTraits):
    needs = List()
    feeling_types = List("negative positive".split())
    chosen_feelings = Set()
    feeling_phrase = Unicode("feeling")
    sentence = Unicode()

    def store_feeling_phrase(self, p):
        print(f"Storing {p}")
        self.feeling_phrase = p
        self.generate_sentence()

    def add_feeling(self, p):
        print(f"Storing {p}")
        self.chosen_feelings.add(p)
        self.generate_sentence()

    def generate_sentence(self):
        feelings_joined = ", ".join(list(self.chosen_feelings))
        print(f"in gen sen, {self.feeling_phrase=}. {feelings_joined=} ")

        self.sentence = " ".join(["I am ", self.feeling_phrase, " ", feelings_joined])


class UI(HasTraits):
    card = Any()
    ui_sentence = Any()
    controller = Any()

    def model_update(self, f, v):
        f(v)
        self.ui_sentence.set_text(self.controller.nvc.sentence)

    def reset(self):
        self.card.clear()
        self.controller.start()

    def build(self):

        i_am = pn.pane.Markdown("I AM").servable()
        feeling_toggle = pn.widgets.RadioButtonGroup(
            name='Radio Button Group', options=['feeling', 'guessing you are feeling'],
            button_type='success').servable()

        for f in self.controller.nvc.feeling_types:
            pn_row = pn.Row(f'### {f} feelings:', scroll=False).servable()
            for list_of_feelings in feelings[f]:
                print(f"--> Currently working with {list_of_feelings}")
                card_label = list_of_feelings[0].upper()
                card_select = pn.widgets.Select(options=list_of_feelings)
                card = pn.Column(f'### {card_label}', card_select)
                pn_row.append(card)


class MyApp(Application):
    nvc = NVC()
    ui = UI()

    def start(self):
        logger.debug("1")
        self.nvc = NVC()

        logger.debug("1")
        self.ui = UI()

        logger.debug("1")
        self.ui.controller = self

        logger.debug("1")
        self.ui.build()


logger.info("in main")
# MyApp.launch_instance()

app = MyApp()
app.start()

Not sure if I understand fully, but maybe sizing_mode="stretch_width"?

Reference:
Control Size — Panel v1.3.0 (holoviz.org)

To clarify what I mean, notice that the row of cards is visually truncated - there are about 20 to display and they do not wrap to the next line but instead continue across and you must scroll horizontally to see them.

I tried that but it did not work. If you wish, you can clone the repo and then type panel serve main_panel.py --show --autoreload to run it.

Otherwise, just note that I added sizing_mode=“stretch_width” to the pn.Row() call and it renders the same way as before:

    def build(self):

        i_am = pn.pane.Markdown("I AM").servable()
        feeling_toggle = pn.widgets.RadioButtonGroup(
            name='Radio Button Group', options=['feeling', 'guessing you are feeling'],
            button_type='success').servable()

        for f in self.controller.nvc.feeling_types:
            pn_row = pn.Row(f'### {f} feelings:', scroll=False, sizing_mode='stretch_width').servable()
            for list_of_feelings in feelings[f]:
                print(f"--> Currently working with {list_of_feelings}")
                card_label = list_of_feelings[0].upper()
                card_select = pn.widgets.Select(options=list_of_feelings)
                card = pn.Column(f'### {card_label}', card_select)
                pn_row.append(card)

If you notice, in the NiceGUI implementation, the row of negative feelings wraps to the next line instead of creating a scrollbar and visually truncating the negative feelings:

scroll=True only affects vertical at the moment`, perhaps you could submit an issue to support horizontal scrolling too.

Seems like rather than pn.Row(), you may want pn.FlexBox FlexBox — Panel v1.3.0 or GridBox.

the FlexBox worked .thank you.