Block

Default display

Full width

Shrink to fit

Inline block wrapper, all items fit

Inline block wrapper, max-width on menu bar

Inline block wrapper with max-width

Inline block wrapper, two items, max-width on menu bar

Long last item, max-width on menu bar

Fit content wrapper with max-width

Inline flex wrapper with max-width

Flex row

Next to a button

Next to two buttons that do not shrink

After a title with flex: 1

Baseline alignment with a label

Flex column

Items aligned to start

Items aligned to end

Grid

Columns auto 1fr

Columns auto auto

Columns minmax(0, auto) 1fr

Items justified to start

Positioned, float and table

Absolute position with max-width

Absolute position at the end of a narrow parent

Float with max-width

Table cell next to a full width cell

Horizontal layout

Toolbar with a title and a button

Options

End aligned theme, max-width on menu bar

Reverse collapse, max-width on menu bar

Right-to-left, max-width on menu bar

Padding and border on menu bar, max-width

Parent sized by content

Split layout, resize the splitter to show the overflow button

After a title in a space-between row

After a full width sibling

End aligned theme after a full width sibling

Right-to-left after a full width sibling

Padding and border on menu bar after a full width sibling

Menu bar with contain: paint after a full width sibling

Two menu bars

Same number of items

Different number of items