Grilla sobre Flexbox

[quico5]

hola, estoy haciendo una grilla sobre flexbox, el problema que veo es que la grilla me ha quedado elástica, si la tengo completamente vacía se ve correctamente, pero si coge contenido el width varia de tamaño

Código HTML:

 <div class="row">
		<div class="col">1/3</div>
		<div class="col">1/3</div>
		<div class="col">1/3</div>
	</div>
	<div class="row">
		<div class="col">1/3</div>
		<div class="col2">2/3</div>
	</div> 

Código HTML:

/* LESS */
.row {
	box-shadow: 0 0 0 1px silver;
	display: flex;
	[class^="col"] {
		box-shadow: 0 0 0 1px silver;
		padding: 1em 0;
		text-align: center;
	}
	.col {
		&  {flex-grow: 1;}
		&1 {flex-grow: 1;}
		&2 {flex-grow: 2;}
		&3 {flex-grow: 3;}
		&4 {flex-grow: 4;}
		&5 {flex-grow: 5;}
		&6 {flex-grow: 6;}
		&7 {flex-grow: 7;}
		&8 {flex-grow: 8;}
		&9 {flex-grow: 9;}
	}
}

Código HTML:

/* CSS */
.row {
  box-shadow: 0 0 0 1px silver;
  display: flex;
}
.row [class^="col"] {
  box-shadow: 0 0 0 1px silver;
  padding: 1em 0;
  text-align: center;
}
.row .col {
  flex-grow: 1;
}
.row .col1 {
  flex-grow: 1;
}
.row .col2 {
  flex-grow: 2;
}
.row .col3 {
  flex-grow: 3;
}
.row .col4 {
  flex-grow: 4;
}
.row .col5 {
  flex-grow: 5;
}
.row .col6 {
  flex-grow: 6;
}
.row .col7 {
  flex-grow: 7;
}
.row .col8 {
  flex-grow: 8;
}
.row .col9 {
  flex-grow: 9;
}

[juangemelo01]

En vez de usar

Código:

flex-grow: 1;

usa

Código:

flex: 1;

lo mismo para

Código:

flex-grow: 2;

usa

Código:

flex: 2;

espero que te sea de ayuda amigo, cualquier duda comenta

[quico5]

Gracias por responder, optara por "flex-grow: 1;" basándome en frameworks conocidos que usan medidas fijas mediante "%" y "em", y en el caso de "flex: 1;" noté como las columnas se iban repartiendo el ancho según su contenido y pensé que igual era un comportamiento no deseado