ui css：max-height < min-height about flexx

[almarklein]

Do you perhaps have a minimal code example to demonstrate what you mean?

[1751660300]

ok, this example, you will know problem click btn for box css, result

element.style {
    max-height: 1080px;
    min-width: 12px;
    max-width: 1e9px;
    min-height: 2798px;
    flex-grow: 0;
    flex-shrink: 1;
    margin-top: 4px;
    padding: 1px;
}

from flexx import flx


class MyApp(flx.Widget):

    def init(self):
        with flx.VBox():
            self.btn = flx.Button(text="测试")
            self.box = flx.VBox(style="max-height: 1080px")
            flx.VBox(flex=1)

    @flx.action
    def add_div(self, text):
        flx.Label(text=text, parent=self.box)

    @flx.reaction("btn.pointer_click")
    def add_ra(self, *event):
        for i in range(100):
            self.add_div(str(i))

app = flx.App(MyApp)
app.launch('app')
flx.run()

[almarklein]

Well, you're applying two conflicting constraints. On the one hand you want the max-height to be 1080, but on the other hand the vbox contains content that requires more space than that to be shown. The latter wins.

[1751660300]

emmm~，now, i want to set max-height, how to do ?

[almarklein]

What do you think should happen? Should the content be compressed in some way? Should it be hidden? Should it scroll?

Perhaps what you're looking for is a scrollable container. There are a few exaples of that in the flexxamples folder.

Other than that, you may be able to achieve what you want with the right CSS, but the way Flexx works (and CSS too, mostly) is that stuff takes up the space it needs to show the contents.

[1751660300]

ok, i find a example in the flexxamples，this is ok， I will also understand it deeply，thanks xixi。