HTML & CSS Interview Question #147

Why does text sometimes overflow a Flexbox or Grid item?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

Flex and Grid items have automatic minimum-size behavior that can prevent them from shrinking below the size required by their content. Long URLs, code, tables, or other unbreakable content can therefore push the item beyond its container.

Detailed Explanation

Flex and Grid items have automatic minimum-size behavior that can prevent them from shrinking below the size required by their content. Long URLs, code, tables, or other unbreakable content can therefore push the item beyond its container.

A common fix is min-width: 0 on the relevant item or minmax(0, 1fr) on a grid track. The content itself may also need overflow, wrapping, or scrolling rules appropriate to its meaning.

Code Example

.layout {
    display: flex;
}

.main {
    flex: 1;
    min-width: 0;
}

.main pre {
    max-width: 100%;
    overflow-x: auto;
}

.grid {
    grid-template-columns:
        minmax(0, 1fr) 18rem;
}