Calcul de flex-shrink — exercice corrigé de CSS : mettre en forme le Web (école d'ingénieur) (chapitre 7)

Calcul de flex-shrink

Flexbox · niveau 3 (difficile)

Énoncé


*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

.rangee {
  display: flex;
  width: 500px;
  background: #dbe4f0;
}

.rangee span {
  color: #fff;
  background: #1f3a68;
}

.a {
  flex: 0 1 400px;
}

.b {
  flex: 0 2 200px;
  background: #a8520a;
}

Les éléments n'ont ni rembourrage ni bordure.

De combien les éléments débordent-ils ?
Calculer la largeur finale de A et de B.
B a un flex-shrink double de celui de A. Pourquoi perdent-ils pourtant autant l'un que l'autre ?
Que se passe-t-il si A a flex-shrink: 0 ?

Corrigé

$400 + 200 - 500 = 100$ pixels de débordement.
Poids : $s_{A} b_{A} = 1 \times 400 = 400$ , $s_{B} b_{B} = 2 \times 200 = 400$ ; total 800. A perd $100 \times 400/800 = 50$ , B aussi. Largeurs : 350 et 150, mesurées par Chromium (code/ch7/exo-shrink.html).
Le flex-shrink est multiplié par la taille de base : B rétrécit deux fois plus par pixel de base, mais il a deux fois moins de base. Les deux effets se compensent.
A ne rétrécit plus : il garde 400 ; B doit absorber seul les 100 pixels et passe à 100 (vérifié dans Chromium). Attention : flex: none ne conviendrait pas ici, car il remet aussi la base à auto, et A perdrait ses 400 pixels.