Why are there no units on the flex-grow value?
On a flex item, flex-grow takes values that are positive integers to specify a proportion of space to take up in comparison to the other flex items if extra space is available within the flex container. There are no units because the value is a proportion.
I’ll add that the flex-grow value is only relevant in relation to other flex-items that have a flex-grow value defined. Having it defined means that particular child will consume the excess space if present within the parent, but if there are no other flex-child elements with a flex-grow value, it wouldn’t matter if the value was 1 or 100; it would behave the same.
Do correct me if I’m wrong, but here’s how I understood the flex-grow property:
By default, flex items will only scale down to fit their parent container. However, if the parent container was larger than the required space to fit all flex items, they wouldn’t scale up. We can change this default behaviour using the flex-grow property. The flex-grow property allows flex items to scale up to fit their parent containers. If we set the flex-grow property of all flex items to 1, they would all take up the same amount of space when scaling up. So if the flex container was 30px wide, each flex item would be 10px wide.
However, we can also set a flex item’s flex-grow property to a number larger than 1 (E.g. 2 or 3) which represents how much more space this flex item will take up than other flex items. So if we had a flex container with a width of 60px containing 3 flex items, and the first two flex item had a flex-grow property of 1 while the third had a flex-grow property of 2, the first two flex item would have a width of 15px while the third flex item would have a width of 30px
This is because setting the third flex item’s flex-grow property to 2 instructs the CSS compiler to make the third flex item twice as large as the other 2 flex items while still making all of them scale up to fit their flex container. This is the case as the first two flex items have widths of 15px each (15px * 2 = 30px) and the third flex item has a width of 30px (30px + 30px = 60px)
I believe we’re in agreement. It’s been a while since I played with CSS, but if I recall, my initial comment was based on an observation I had while doing the lesson, which was that within a flex-container, only elements that had flex-grow defined expanded to fill the container. The value defined is the ratio of the available space allocated to that particular element, but only in relation to other elements in the flex-container that had flex-grow defined.
The distinction I was trying to make was that for example, if you have three elements in a flex-container and only one has flex-grow defined, that element would consume all of the excess space regardless of its flex-grow value, as the other two elements would effectively be flex-grow: 0.
Yeah, of course! What I just discovered from this article (originally on the flex-shrink property) is that the flex-grow property actually controls how much leftover space flex items take. This means that if we have a flex item with a width or a flex-basis of 500px with a flex-grow of 1 and another flex item with a width or a flex-basis of 50px with a flex-grow of 5 all nested inside a flex container with a width of 800px, the second flex item will take up 5 times as much leftover space as the first flex item, but, it won’t end up having a larger width than the first flex item
I wonder, then, if padding and margin would impact the display at all. I would imagine the answer to be yes?
I’m not sure I understand your question. Can you elaborate?
I am not sure, if you have to enter integers to flex-grow.
I have just tried 1.5, and it worked quite good. “Positive numbers” is a better term, I guess.
Yes, not only integers can be values of the flex-grow properties
Just to add to the existing helpful comments, flex-grow will only work if there is positive free space. For example if the flex container is 500px and we have 3 items in it, each with a width value of 100px then we have 200px of positive free space (500 - (3 x 100) = 200). Then we can add the flex-grow property to each item and that will distribute the positive free space according to the values of flex-grow. MDN has a series of articles that explain EVERYTHING you need to know about flexbox. Specifically about the flex-grow and the notion of positive and negative free space I recommend reading this article → Flexbox flex items’ flex properties
Flex-grow property accepts numerical values. Accepts an integer, a zero or decimal digits, negative numbers are invalid. It’s default value is 0.
Good Day, Everyone 
literally really great addition to better understanding “positive space” and its distribution. thanks.