Flex-basis=0 is supposed to override width, but it doesn't

I've read that flex-basis should override width. But in this example，both containers have flex-basis:0, but the second one also has width:50px defined and it clearly has an effect of making the size equal.

So I'm puzzled by 2 related things:

1. why didn't flex-basis:0 override the width (I'd expect no effect when adding width to css)
2. why didn't flex-basis:0 worked to set the hypotethical size to 0 resulting in the equal width without adding width

As I understand from the spec:

Determine the flex base size and hypothetical main size of each item:

1. If the item has a definite used flex basis, that’s the flex base size.
2. The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).

So flex base size is set and should resolve to 0. Hypothetical main size should also resolve to 0 since there are min/max width constraints.

    .container1, .container2 {
        width: 210px;
        height: 200px;
        padding: 10px;
        border: solid;
        display: inline-flex;
        box-sizing: border-box;

        div {
            margin: 1px;
            flex: 1 1 0;
        }

        & div:nth-child(1) {
            background: lightpink;
        }

        & div:nth-child(2) {
            background: lightblue;
        }
    }

    .container2 div {
        width: 50px;
    }

<div class="container1">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>
<div class="container2">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>

You are missing the Automatic Minimum Size of Flex Items. Here is the difference between both cases if you don't enable the growing.

.container1,
.container2 {
  width: 250px;
  height: 200px;
  padding: 10px;
  border: solid;
  display: inline-flex;
  box-sizing: border-box;

  div {
    margin: 1px;
    flex: 0 1 0;
  }

  & div:nth-child(1) {
    background: lightpink;
  }

  & div:nth-child(2) {
    background: lightblue;
  }
}

.container2 div {
  width: 50px;
}

<div class="container1">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>
<div class="container2">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>

First of all, none of them have a size equal to 0. "short" has a size equal to its content and "long" has either a size equal to 50px or equal to its content.

To provide a more reasonable default minimum size for flex items, the used value of a main axis automatic minimum size on a flex item that is not a scroll container is a content-based minimum size; for scroll containers the automatic minimum size is zero, as usual.

In general, the content-based minimum size of a flex item is the smaller of its content size suggestion and its specified size suggestion.

The content size suggestion is based on what you provided (the shortest word here) and the specified size suggestion is the width you set. "long" is using the minimum between both of them.

Set min-width: 0 to disable this and you will get what you expect:

.container1,
.container2 {
  width: 250px;
  height: 200px;
  padding: 10px;
  border: solid;
  display: inline-flex;
  box-sizing: border-box;

  div {
    margin: 1px;
    flex: 0 1 0;
    min-width: 0;
  }

  & div:nth-child(1) {
    background: lightpink;
  }

  & div:nth-child(2) {
    background: lightblue;
  }
}

.container2 div {
  width: 50px;
}

<div class="container1">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>
<div class="container2">
  <div>short</div>
  <div>looooooooooooooong</div>
</div>

Both size are resolving to 0 (the text is overflowing) and then both will grow equally to fill the remaining space.