The Sidebar

A form with button

using the flex-first utility class on the not sidebar part to flip the order



A bunch of content

some instructions inside


this would be the sidebar

    this would be the content

    set the min width of this element with minWidthContent using a custom css variable like minWidthContent="--my-prop", or a valid css size and size unit, like minWidthContent="10rem" (default).

    This should generally be longer so here:

    • move things around with the props paddingSidebar, paddingContent and alignItems.
    • Stretch or grow the sidebar by providing the flexBasisSidebar with a custom css variable, like flexBasisSidebar="--my-prop", or a valid css size and size unit, like flexBasisSidebar="20rem" (default).

    Trying to use boxes

    this one is using intrinsic size for the sidebar content so it should try to only use as much as it needs


    this would be the sidebar

    this would be the content

    set the min width of this element with minWidthContent using a custom css variable like minWidthContent="--my-prop", or a valid css size and size unit, like minWidthContent="10rem" (default).

    This should generally be longer so here:

    • move things around with the props paddingSidebar, paddingContent and alignItems.
    • Stretch or grow the sidebar by providing the flexBasisSidebar with a custom css variable, like flexBasisSidebar="--my-prop", or a valid css size and size unit, like flexBasisSidebar="20rem" (default).