In response to @James Montagne's explanation, setting flex-basis: 0 ensures that the flexbox columns are evenly distributed. This approach works well in situations where the column content can wrap without being constrained by width. However, when the width of the column content is fixed (e.g., with image width or white-space: nowrap), it is recommended to use min-width: 0...

li {
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}

Check out the code example here

If you want to make elements have the same width using Flex, make sure to apply the following properties to your child (flex) elements:

flex-basis: 25%;
flex-grow: 0;

This will ensure that all elements in a row are given 25% width each, without any of them expanding beyond their initial size.

Solution:

flex: 1;

OR

.flex-child-items{
   flex-grow: 1;
} 

Explanation:

In the case where you only have display: flex, the items will align horizontally and their width will be the total of all children's widths (based on content or the width property).

For instance:

// A typical flex arrangement

++++++++++   ++++++++++   ++++++++++
+        +   +        +   +        +
+   A    +   +   B    +   +   C    +
+  10px  +   +  10px  +   +  10px  +
+        +   +        +   +        +
++++++++++   ++++++++++   ++++++++++

If you want to evenly distribute space among them, simply add flex-grow: 1 to each child item within the flex container (A, B, and C in this example).

.A, .B, .C {
    flex-grow: 1;
}

After applying this rule, the layout transforms into:

++++++++++                              ++++++++++                              ++++++++++
+        +                              +        +                              +        +
+   A    +                              +   B    +                              +   C    +
+  10px  +                              +  10px  +                              +  10px  +
+        +                              +        +                              +        +
++++++++++                              ++++++++++                              ++++++++++

*By the way, if the alignment in the above example appears off-center, please test it in your project for accurate results.

To comprehend why the flex-grow property doesn't evenly distribute items in a flex container, we must delve into the mechanics of the flex algorithm and grasp how flex-grow functions.

1. Originary Behavior of display:flex:

Upon setting a container to display:flex, it defaults to flex-direction:row, causing its flex items to have widths determined by their content. In this scenario, larger content results in wider items. The removal of padding and flex-grow from your code highlights this behavior:

After clearing those declarations from .tabs ul li:{...}:

flex-grow: 1;
padding: 20px 20px 20px 70px;

https://i.sstatic.net/bhBuK.png

* {
  font-size: 16px;
}

.tabs {
  max-width: 1010px;
  width: 100%;
  height: 5rem;
  border-bottom: solid 1px grey;
  margin: 0 0 0 6.5rem;
  display: table;
  table-layout: fixed;
}
.tabs ul {
  margin: 0;
  display: flex;
  flex-direction: row;
}
.tabs ul li {
/*   flex-grow: 1; */
  list-style: none;
  text-align: center;
  font-size: 1.313rem;
  background: blue;
  color: white;
  height: inherit;
  left: auto;
  vertical-align: top;
  text-align: left;
/*   padding: 20px 20px 20px 70px; */
  border-top-left-radius: 20px;
  border: solid 1px blue;
  cursor: pointer;
}
.tabs ul li.active {
  background: white;
  color: blue;
}
.tabs ul li:before {
  content: "";
}

<div class="tabs">
  <ul>
    <li class="active" data-tab="1">Pizza</li>
    <li data-tab="2">Chicken Noodle Soup</li>
    <li data-tab="3">Peanut Butter</li>
    <li data-tab="4">Fish</li>
  </ul>
</div>

2. The Function of flex-grow: When applied to a flex item, flex-grow commands the item to expand when there's available space within the container.

3. Even Distribution with flex-grow:1: By setting all items to flex-grow:1, as demonstrated in your example, they will share the remaining space proportionally. However, initially, they do not have equal widths. The additional space is distributed among each item based on its initial width (the content width).

This is how it appears when reverting back to flex-grow:1:

Note that while the right space after each item is uniform, the item widths are unequal due to varying content sizes https://i.sstatic.net/pl9qi.png

4. Resolving the Uneven Width Concern: To achieve genuine equal distribution, you can set the width of the items to 0, allowing the space to be allocated by flex-grow resulting in this appearance: https://i.sstatic.net/chqqz.png

Take note of the blue rectangle outlining all items

With all available space now accessible for distribution by flex-grow, it can be evenly divided among the flex items.

Alternatively, utilizing the flex-basis property ensures equal distribution. Setting flex-basis:0 yields a similar outcome. Another option involves employing the shorthand flex property, where flex:1 mirrors flex-grow:1, flex-shrink:1, and flex-basis:0.

Both approaches yield equivalent results:

https://i.sstatic.net/eztz7.png

Following the reintroduction of padding, here is the resultant depiction: https://i.sstatic.net/mru2m.png

The flex algorithm determines the original width (for flex-direction:row) and height (for flex-direction:column) using flex-basis, which can supersede the width or height property if present. To prevent potential errors, it is advisable to utilize it or the shorthand flex property to ensure consistent and predictable performance.

In conclusion, guaranteeing equitable space distribution among flex items is achievable through flex-basis:0 or flex:1 with default values while acknowledging the intricacies of the flex algorithm. This approach maintains an equal and consistent division of items within a flex container, regardless of their initial content-based widths.