Battle for Size

This is one of the most common questions. Why sometimes width works and sometimes you need flex-basis?

Main Differences:

1. Direction: width always handles horizontal. flex-basis handles the main axis. If you have flex-direction: column, then flex-basis becomes height!
2. Priority: If both properties are set, flex-basis has priority over width (or height).
3. Minimum threshold: flex-basis: 0 is not the same as width: 0. With flexes, this means " collapse to minimum possible content size " .