flex & flex-flow

flex es el atajo de flex-grow, flex-shrink y flex-basis, en ese orden. flex-flow hace lo mismo con flex-direction y flex-wrap en el contenedor.

flex: initial: equivale a 0 1 auto. No crece, pero sí se encoge.
flex: auto: equivale a 1 1 auto. Parte de su contenido y reparte el espacio libre.
flex: 1: equivale a 1 1 0%. Ignora el contenido para que los ítems midan lo mismo.
flex: none: equivale a 0 0 auto. Mantiene su tamaño y no crece ni se encoge.
flex-flow: row wrap: define en una sola línea la dirección y el envoltorio.

Ejemplo

Los hermanos tienen flex: 1 y el hijo con la clase item tiene más texto. Con auto parte del tamaño de su contenido y con 1 mide lo mismo que sus hermanos. Reduce el ancho del contenedor para ver la diferencia entre initial, que se encoge, y none, que no.

ResultadoEn vivoAncho del contenedor100%

html

<div class="container">
  <div class="child">1</div>
  <div class="child item">item with more text</div>
  <div class="child">3</div>
</div>

<div class="container">
  <div class="child">1</div>
  <div class="child item">item with more text</div>
  <div class="child">3</div>
</div>

css

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}

.child {
  flex: 1;
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  flex: initial;
}

.container {
  border: 1px solid #2b7de0;
  display: flex;
  gap: 1rem;
  padding: 0.5rem;
}

.child {
  flex: 1;
  padding: 1rem;
}

.item {
  background: #d9d2f5;
  flex: initial;
}

Edita el código o usa los selectores: el resultado cambia al instante.