#12909

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

« 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.
http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text