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;
}