Flexbox сетка c одинаковыми отступами

Необходимо сделать flex-box сетку. Расстояние между колонками фиксированное - 10px. Колонки тянуться по ширине родителя.

Первый вариант - https://jsfiddle.net/5dcuz6ko/1/ Между колонками - расстояние 10px. При одинаковом количестве колонок работает отлично. Но стоит разместить колонки разной ширины, то сетка уже ломается.

Придумал решение - https://jsfiddle.net/vx2ccu0w/ Убрал отступы, но добавил padding. При этом у первого и последнего элемента убрал padding слева и справа соотвественно. Работает вроде какнормально. Сетка не ломается.

Собственно вопрос - правильно ли я сделал? какие могут быть проблемы и есть ли варианты проще?

Важный момент - внутри колонок содержимое занимает 100%

Пример неправильно работающей сетки

HTML

<div class="row">
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
  <div class="col-xs-1"></div>
</div>
<div class="row">
  <div class="col-xs-2"></div>
  <div class="col-xs-2"></div>
  <div class="col-xs-2"></div>
  <div class="col-xs-2"></div>
  <div class="col-xs-2"></div>
  <div class="col-xs-2"></div>
</div>
<div class="row">
  <div class="col-xs-2"><button>wewq</button></div>
  <div class="col-xs-10">
 <input type="text">
  </div></div>
</div>
<div class="row">
  <div class="col-xs-12">
    <input type="text">
  </div>
</div>
<div class="row">
  <div class="col-xs-3">
    <input type="text">
  </div>
  <div class="col-xs-3">
    <input type="text">
  </div>
  <div class="col-xs-3">
    <input type="text">
  </div>
  <div class="col-xs-3">
    <input type="text">
  </div>
</div>
<div class="row">
  <div class="col-xs-6">
    <input type="text">
  </div>
  <div class="col-xs-6">
    <input type="text">
  </div>
</div>
<div class="row">
  <div class="col-xs-9">
    <input type="text">
  </div>
  <div class="col-xs-3">
    <input type="text">
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}
div.row {
  display: flex;
}
[class^="col-xs"] {
  border: 1px solid red;
  height: 20px;
}
[class^="col-xs"] + [class^="col-xs"]{
  margin-left: 10px;
}

.col-xs-1 {
  flex-grow: 1;
  flex-basis: 8.33333333%;
  max-width: 8.33333333%;
}
.col-xs-2 {
   flex-grow: 1;
  flex-basis: 16.66666667%;
  max-width: 16.66666667%;
}
.col-xs-3 {
   flex-grow: 1;
  flex-basis: 25%;
  max-width: 25%;
}
.col-xs-4 {
     flex-grow: 1;
  flex-basis: 33.33333333%;
  max-width: 33.33333333%;
}
.col-xs-5 {
     flex-grow: 1;
  flex-basis: 41.66666667%;
  max-width: 41.66666667%;
}
.col-xs-6 {
     flex-grow: 1;
  flex-basis: 50%;
  max-width: 50%;
}
.col-xs-7 {
     flex-grow: 1;
  flex-basis: 58.33333333%;
  max-width: 58.33333333%;
}
.col-xs-8 {
   flex-grow: 1;
  flex-basis: 66.66666667%;
  max-width: 66.66666667%;
}
.col-xs-9 {
   flex-grow: 1;
  flex-basis: 75%;
  max-width: 75%;
}
.col-xs-10 {
   flex-grow: 1;
  flex-basis: 83.33333333%;
  max-width: 83.33333333%;
}
.col-xs-11 {
     flex-grow: 1;
  flex-basis: 91.66666667%;
  max-width: 91.66666667%;
}
.col-xs-12 {
     flex-grow: 1;
  flex-basis: 100%;
  max-width: 100%;
}
button {
  width: 100%;
}
input {
  width: 100%;
}