Why flex: 1; behaves diffrently from flex: 1 1 auto or flex-grow: 1?

I was taking a course of html and css and the teacher explained that flex property is the shorthand of flex grow,shrink and basis.
Why using flex:1; on every children makes them to behave diffrently from flex: 1 1 auto; or flex-grow:1;. And another question, why if i call flex: 1 in the parent container this isn’t inherited by the children.

Pen link

div {
  width: 1366px;
  font-size: 30px;
  color: #009e2a;
  display: flex;
  background-color: #c9663e;
  gap: 30px;
}

.element1 {
  background-color: red;
  /*     flex-grow: 1; */
  flex: 1;
}

.element2 {
  background-color: blue;
  /*     flex-grow: 1; */
  flex: 1;
}

.element3 {
  background-color: navy;
  /*     flex-grow: 1; */
  flex: 1;
}

<div>
  <p class="element1">ana are mere djskahdkahk</p>
  <p class="element2">
    da chiar are mere dasldsakjdfhaskfjgsaj dkjashdkasghkd dkjsahdkja, fajkfa.hdkjash
  </p>
  <p class="element3">ce tar dalkjjd klashe</p>
</div>

>Solution :

According to the docs : flex : 1 is short for flex: 1 1 0 not flex: 1 1 auto.

With flex:1, flex-grow is 1, flex-shrink value is assumed to be 1 and the flex-basis value is assumed to be 0.

Also read up this bit, the property is not inherited.