Make widgets truly full height in Solara: fix Title wrappers by using a Column or Row with height: 100%

Solara guide: fix full-height widgets in AppLayout when Title breaks height: 100%. Use a Column or Row to propagate height and avoid wrapper issues. Learn how.

Full-height content in a Solara page sounds trivial until a seemingly harmless heading shrinks everything back to default. If your goal is to let a widget stretch to all available vertical space inside the main content area while keeping the standard AppLayout, there’s a gotcha worth knowing.

The setup and the surprising behavior

Start with a simple page and a button that should occupy the full height. This works as expected.

import solara

@solara.component
def LayoutOnly():
    solara.Button(label="Action", style={"height": "100%"})

Now add a page title before the button. The button no longer expands; it falls back to a standard height.

import solara

@solara.component
def LayoutWithTitle():
    solara.Title("Layout test")
    solara.Button(label="Action", style={"height": "100%"})

That’s the core issue: introducing Title changes the layout behavior and prevents the child component from taking the full vertical space.

What actually happens

Title automatically wraps the content in an extra div that has minimal height. In effect, it behaves as if a Column were inserted under the hood, but you don’t control that container, so you can’t push height: 100% down the tree. In practice, inspecting the page in DevTools shows the button sitting inside a wrapper that would also need height: 100%, but there’s no direct way to set it. In some CSS scenarios, forcing values with height: 100% !important helps, but that’s not the approach to rely on here.

A controlled fix

Make the container explicit. Wrap the content in a Column yourself and give the container height: 100%. Now you control the parent that needs to stretch, and the child can inherit and fill the remaining space as intended.

import solara

@solara.component
def FixedLayout():
    with solara.Column(style={"height": "100%"}):
        solara.Title("Layout test")
        solara.Button(label="Action", style={"height": "100%"})

With this structure, the button expands to maximum height and maximum width.

Row-based variant

If you prefer a horizontal layout, Row works too when it carries the height. In this case, the button reaches maximum height but retains minimum width, which may be exactly what you want in a horizontal arrangement.

import solara

@solara.component
def RowVariant():
    with solara.Row(style={"height": "100%"}):
        solara.Title("Layout test")
        solara.Button(label="Action", style={"height": "100%"})

A common pitfall

The same symptom appears if any component is placed outside a Column or Row. Even a standalone Button positioned above your layout container can cause the full-height element to stop expanding.

import solara

@solara.component
def MixedLayout():
    solara.Button(label="Top", style={"height": "100%"})

    with solara.Row(style={"height": "100%"}):
        solara.Title("Layout test")
        solara.Button(label="Action", style={"height": "100%"})

Keep the content you want to stretch inside the explicit layout container that you control.

Why this matters

In Solara, height propagation depends on the container hierarchy. When a wrapper with minimal height appears between your page and the component you expect to grow, height: 100% on the child can’t resolve correctly. By giving the layout container itself height: 100% and keeping your content inside it, you make the sizing predictable and robust, even when structural elements like Title are present.

Conclusion and practical advice

Place your content inside a Column or Row that explicitly spans the available height. Apply height: 100% to that container and to the components that need to stretch. Avoid leaving elements outside the main layout container, as they can reintroduce the minimal-height wrapper issue. If something still doesn’t behave, verify the actual DOM and computed CSS in DevTools to ensure the right element owns the height, then push the 100% height down the tree from there.