Ce matin, j’ai eu un cas un peu bateau qui m’a fait tourner en bourrique pendant une bonne heure. Je cherchais à avoir un button qui prenne toute la largeur de son conteneur parent (qui lui est en position: relative).
Très logiquement, je l’affuble d’un position: absolute et je mets top/left/right/bottom à 0. Logique me direz-vous.
Sauf que cela ne marche pas du coup, et nulle part.
En recherchant un peu et en demandant sur Twitter, j’apprends que certains éléments sont qualifiés de « replaced elements ». En gros, ce sont des éléments dont l’apparence et les dimensions sont définis par une ressource externe. L’exemple typique est l’img (qui a ses propres dimensions), les object (plugins, etc.), mais aussi certains éléments de formulaires, comme les select, les button, textarea, etc. (ce qui peut se comprendre, étant stylés selon les systèmes/navigateurs).
Et des règles assez tordues existent, je vous passe le détail sur les « replaced elements » positionnés en absolu, mais en gros, dans mon cas tout simple du dessus, la spécification indique que la valeur de right sera totalement ignorée (ce qui confirme ce que la démonstration montre).
Ce n’est pas un bug, c’est une feature de la spécification.
Bref, en mettant un width: 100% au lieu de right: 0 dans mon cas, cela fonctionne (voir le pen ci-dessus avec la solution).
Pour en savoir plus sur le sujet :
- What The Heck Is A Replaced Element?
- Qu’est-ce qu’un élément remplacé ? (traduction du précédent)
- Replaced element, on Mozilla Developer Network
- Replaced element, on Sitepoint
On en apprend tous les jours avec CSS.
Et left: 0 + right: 0 ne suffisent pas à écraser un width, même intrinsèque.
Dans tes exemples, on voit bien que le problème ne se pose que sur width (qui est intrinsèque) et non sur height.
Sinon, c'est aussi résolu ainsi :
.conteneur {
display: flex;
}
.button {
flex: 1;
}
#FlexboxFTW