It shows up in almost every mockup that lands on my desk: a grid where every component lines up to the pixel. If you are new to this, the fix looks obvious. Set a height, ship it. After 14 years in the WordPress editor, I know how that story ends, and fixed-height cards are where it usually starts.
The design is not the problem. The assumption that content stays put is. Editors rewrite copy, German translations run about 30% longer, and plenty of readers bump their default font size up for accessibility. A fixed height does not hold any of that still. It only decides in advance where the overflow will land, which is why I keep describing the result as “groceries spilling out of a torn bag.”
Where fixed-height cards fall apart
A hard height cuts the link between a block element and the content inside it. Left alone, the browser measures that content and sizes the box to fit. Write height: 350px; and you have told it to stop measuring. When the text grows past the number you picked, it has nowhere to go, so it runs into whatever sits below.
The usual patch is overflow: hidden or a hard line clamp. Both have their uses, but neither is load bearing. If a layout only holds together because you are hiding text, it is one content update away from a bug report. I went through more of the layout tradeoffs in my post on Modern CSS Layouts.
Pinning the button with absolute positioning
Fixed-height cards usually arrive with a second habit: absolutely positioned action buttons. Pinning the “Read More” button to the bottom edge looks clean, but it takes the button out of the document flow. The parent stops accounting for it, so you end up guessing at bottom padding until the card looks about right.
/* The Bad Way: Hard heights and guesswork padding */
.card {
height: 375px;
position: relative;
}
.card__body {
padding-bottom: 60px; /* A guess! */
}
.card__actions {
position: absolute;
bottom: 14px;
}Let the content set the height
Flexbox and Grid give you the alignment the mockup is asking for without pinning anything to a number. Instead of setting a height on the card, let the grid row even things out: cards in a row stretch to match the tallest one, and the tallest one is however tall its content needs to be.
The card gets flex-direction: column and the body gets flex: 1. The body then takes whatever space is left over and the footer settles at the bottom without leaving the flow, so nothing needs a guessed offset. Gutenberg has started handling some of this natively, which I covered in What’s New in Gutenberg Layout Fixes.
/* The Resilient Way: Flexbox and Intrinsic Sizing */
.card {
display: flex;
flex-direction: column;
height: 100%; /* Allows grid to stretch it */
}
.card__body {
flex: 1; /* Grows to fill space */
display: flex;
flex-direction: column;
}
.card__title {
font-size: clamp(1rem, 2vw, 1.25rem); /* Fluid Typography */
}Stress test the card before you ship it
Fixed-height cards look fine right up until something breaks them, so I break them on purpose. Before a component ships, I run a stress test script over it: one absurdly long unbroken string, images pulled out to see what the fallback height does, font size doubled. Anything that falls over falls over on my machine instead of the client’s.
// Simple Vanilla JS to stress test your layout
const bbioon_stress_test = () => {
const cards = document.querySelectorAll('.card');
cards.forEach((card, index) => {
if (index === 0) {
card.querySelector('.card__title').innerText = "ExtremelyLongUnbrokenStringToTestOverflowBehavior";
}
if (index === 1) {
card.style.fontSize = "1.5rem";
}
});
};If fixed-height cards are eating your dev hours, I can take that off your plate. I have been building on WordPress since the 4.x days.
What to do instead
A rigid height is a bet that the content will never change, and that bet loses eventually. Stop counting characters, let intrinsic sizing do the measuring, and the same card survives a long title, a missing image and a reader running larger text. Most of the layout bugs I get called in to fix are not really CSS problems. They are decisions about where the height comes from.
