Fixed Heights
Apr 28 2026
While designing interfaces, it might seem counterintuitive to keep containers heights as fixed as opposed to fit (or hug contents) but there are cases where keeping the height fixed could help prevent some abrupt layout shifts.
This is especially noticeable with containers that have variants where some elements are either present or absent.
Here are a few examples where locking down a container's height matters.
1. Containers with conditional content
Let's take a section that shows a list of members in a group where the admin of this group has a settings icon in the header to manage details of this group, but ordinary members do not see this icon.
Without keeping a fixed height here, The admin's header is slightly taller than that of members. While a member of the group might not notice it on their own screen, the moment they are in a group where they are an admin, the row suddenly gets taller (and vice versa) creating a noticeable disconnect.
In a case like this, keeping a fixed height for the header would prevent this layout shift and keeps the experience consistent as users move between contexts.
Toggle to compare.
Contextual header height
2. Button Variants
Buttons come in states — text only, text plus icon, icon only. A fixed height keeps them visually consistent regardless of what's inside.
If you let the height adjust, removing one of its contents suddenly makes the button smaller, which feels inconsistent. Locking the height means all button states maintain the same footprint.
Toggle between states to see the difference
Button Height Prototype
3. Input fields with dynamic tags
When users add filters or tags to an input field, the field grows as pills appear. A fixed height prevents the field from expanding, keeping the layout stable as users add or remove tags.
Add or remove tags to compare.
Input field demo
Next Read