whylayout - nine layouts that are lying to you

1. The card that will not shrink

All three cards are flex: 1 1 0, so they should be exactly the same width. One of them is nearly three times the others, and the row overflows.

Short content.

https://example.com/averylongunbreakableurlwithnohyphens

Also short.

2. The gap that is not where you think

The panel has no top padding and no top margin, and yet there is 48px of air above it.

Panel heading

The heading's top margin is outside the panel, pushing the panel down.

3. The sideways scroll

Something on this page is wider than the viewport. Exactly one thing.

Fine

Not fine

Fine

4. The grid column that blew out

Three columns of 1fr, so they should be equal thirds. The middle one is nearly twice the others and the grid overflows.

Equal third, allegedly

Supercalifragilisticexpialidocious_and_then_some

Equal third, allegedly

5. The z-index that does nothing

The badge asks for z-index: 9999 and still sits under the ribbon. Raising the number will not help.

z-index: 9999 on top anyway

6. The fixed element that scrolls

The call to action is position: fixed, and it still scrolls away with the page. One property on an ancestor did that.

7. The width that was capped

The box asks for width: 480px and renders at 320px. Nothing is overriding the width declaration.

width: 480px

8. The width that does nothing at all

This <span> asks for width: 400px and is as wide as its text.

width: 400px, ignored

9. The centring that does nothing

This bar is display: flex with align-items: center on it. The icon still sits at the top and nothing you do to align-items changes that.

tall

align-items: center, allegedly

Which rule won?

The heading below is styled by four different rules across two cascade layers, one of them !important. Open the console and run whylayout.explainCascade(document.querySelector('.contested'), 'color').

Nine layouts that are lying to you