The remaining space is only there if your content does not fill the whole width. If you fill the flex children with content then there is no remaining space as such. You need to use the flex-grow with flex-basis at the same time. That’s why they recommend in the specs that you use the shorthand to set the properties.
e.g.
flex:1 0 0%;
Flex-basis is auto by default (which basically means look at my content width) but if you set it to zero (IE11 like a % on the end of that unit) then you will see that the divs are roughly 3 to 1 in size even when filled with content.
I’ve added 3 more lines to my demo using the shorthand using 0% and you can see that now they are roughly 3 to 1 without any widths needed. The won’t be exactly the same as 75% and 25% because some space is taken into account.
Does that make it easier to understand. use shorthand and always set the basis when you have fluid content.
Yes they are working but 3 time nothing is still nothing. There is no free space to distribute 