As explained in @James Montagne answer flex-basis: 0 will ensure the flexbox columns are distributed evenly which works in this case since the column content can wrap and isn't forcing the width. However, in cases where the width of the column content is forced (for example with image width or white-space: nowrap), the solution is to set min-width: 0...

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

https://codeply.com/p/sLZxZRFduI

To create elements with equal width using Flex, you should set to your's child (flex elements):

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

It will give to all elements in row 25% width. They will not grow and go one by one.

Solution:

flex: 1;

OR

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

Explanation:

If you only put display: flex it just horizontally align all the item and the width is going to be sum of child's width (depend on the content or sometimes width property).

For example:

// A normal flex

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

Now suppose you want to divide space equally to all of them. To do this add flex-grow: 1 to all children of flex. (In this example A,B and C)

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

After this it looks like this:

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

*BTW, if the above example box does not look like center, sorry for that but code work try it on the project.

To understand why setting the flex-grow property doesn't distribute items equally in a flex container, we need to delve into the inner workings of the flex algorithm and understand how flex-grow operates.

1. Default Behavior of display:flex:

When you set a container to display:flex, it defaults to flex-direction:row, and its flex items will have widths based on their content. In this scenario, the larger the content of an item, the wider it becomes. The padding and flex-grow have been removed from your code to show this behavior:

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

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

* {
  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 Role of flex-grow: Applying flex-grow to a flex item instructs the item to expand when there's available space within the container.

3. Equal Distribution with flex-grow:1: If we set all items to flex-grow:1, like in your example, they will proportionally share the remaining space equally. However, it's essential to note that initially, they are not of equal width. The additional space is added to the initial width of each item (the content width).

Here's how it looks when we return back flex-grow:1:

Note that the right space after each flex item is equal but the width of items are not equal due to different content sizes

4. Solving the Unequal Width Issue: To achieve truly equal distribution, you can set the width of the items to 0 this will make the space available to be utilized by flex-grow and here how it looks:

Note that the blue rectangle is the border of all the items

Now we have all available space to be distributed by flex-grow and we can divide them evenly among flex items.

Alternatively, you can use the flex-basis property to ensure equal distribution. Setting flex-basis:0 produces a similar result. Another option is to use the shorthand property flex, where flex:1 is equivalent to flex-grow:1, flex-shrink:1, and flex-basis:0.

and both options achieve the same result:

and here is the result after we add back the padding:

It's worth mentioning that the flex algorithm has a way of determining the initial width (in the case of flex-direction:row) and height (in the case of flex-direction:column) using flex-basis that can override the width or height property if it exists. To avoid potential bugs, it is recommended to use it or the shorthand flex property to ensure consistent and predictable behavior.

In summary, to ensure equal distribution of space among flex items, you can use flex-basis:0 or flex:1 with default values, while keeping in mind the nuances of the flex algorithm. This approach ensures that items in a flex container are divided equally and consistently, regardless of their initial content-based widths.

Flex may not give equal widths to children in all cases.

use css grid for equal width elements.

.el{
 display: grid;
 grid-auto-flow: column;
 grid-auto-columns: 1fr
}

Reference https://css-tricks.com/equal-columns-with-flexbox-its-more-complicated-than-you-might-think/

If you wish to use CSS flex only, then there are few options

1. flex-basis: 100% to all the childs, this will be a close match. OR
2. flex-basis: 0 this is less useful than first option