PROJET AUTOBLOG


Shaarli - Les discussions de Shaarli

Archivé

Site original : Shaarli - Les discussions de Shaarli du 23/07/2013

⇐ retour index

[css] - How to keep a flex item from overflowing due to its text? - Stack Overflow

mercredi 5 août 2015 à 17:34
le hollandais volant
« By default, flex items won't shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the ‘min-width’ or ‘min-height’ property. »

Ok, donc un élément fils d’un bloc en flex (le grand parent a "display: flex", les fils ont "flex: 1 x x" et là je parle des petits fils donc), peut tout faire dépasser si on n’utilise pas « min-width: 0; » sur le bloc grand-parent.

Un peu bizarre, mais ça marche.

De nouvelles valeurs pour « min-width » sont prévues, voir là : http://codepen.io/Kseso/pen/KJIeD .

Je ferais un article sur le flexbox et des exemples : ce truc change la vie de designer :o.
Malgré quelques tricks à retenir, tout est incroyablement plus simple que jongler avec float/display/position.
C’est la meilleure chose qui soit arrivée à l’humanité depuis l’invention de la crème brûlée par un soldat de la milice alors qu'il digérais les huîtres du nouvel an en 2001. Heu… pardon.
— (permalink)