0

I am trying to understand flex-basis. If flex-basis is auto then it means set initial width to the min-content and then apply flex-grow or flex-shrink according to the ratio i.e. If each item has flex: 1 1 auto, and the initial width of each item is 93px, 93px and 83px respectively. If there is some extra space in the parent then it calculates extra space, divide it into 3 portions, and then grows each item accordingly by adding one portion. If the parent is small, then it shrinks by subtracting one portion.

If flex-basis is set to 0%, then does it divides the entire width of the parent into the 3 portions and assign each portion to each item? If flex-grow or flex-shrink is set to 0 then they get the defined width.

Is this right, if not please explain using the mathematical example.

Twinkle
  • 59
  • 1
  • 5
  • Does this answer your question? [What exactly flex-basis property sets?](https://stackoverflow.com/questions/23569229/what-exactly-flex-basis-property-sets) – mgm793 Feb 24 '23 at 08:49
  • No, it doesn't explain my question. I understand the behaviour in case of fixed width, what I am not getting how the elements width is decided by what ratio in case of flex basis auto and 0% – Twinkle Feb 24 '23 at 09:07

0 Answers0