So, i had an element display: flex; and 3 children items within it with flex-grow: 1; The first and the last have nav items and the second, a div . No width set. And i couldn’t figure out why my child elments wouldn’t be all the same size. I finally got my answer from stackoverflow (once again!) and the user cimmanon that explains:
Flex-grow is commonly misunderstood in this way. Flex-grow only controls how the left over space is distributed between flex items, not how big they are in proportion to each other.
So i just added width: calc(100%/3); on the child elements and bam! Victory.
Gotta dig further about flex.