Как сделать так, чтобы все внутренние div заполняли всю высоту их родительского div?

Как сказал @Ria Elliger, вы можете использовать таблицу-макет для этого.

Вы должны сделать дополнительный элемент для таблицы. Таким образом вы можете выровнять таблицу посередине, как показано на рисунке:

  <div class="con">
    <div id="table">
      <div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
      <div>sdfkjsd kfjsdf sdfj sdfj sdlk fslkd fskldf  sdf sdf sd f</div>
      <div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
      <div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
      <div>gdsgsdg sg sdg sdf gdf gd fg dfg</div>
    </div>
  </div>

Где каждый div внутри таблицы действует как table-cell:

#table > div {
  /*display: inline-block;*/
  border: 1px solid gray;
  width: 50px;
  display: table-cell;
  vertical-align: bottom;
}

Поскольку table-cell по умолчанию будет выровнена сверху, вы хотите изменить ее, чтобы она расходилась до вершины. Поэтому используется vertical-align: bottom;

Теперь вы можете выровнять таблицу до середины вашего родительского элемента:

#table
{
  display: table;
  margin: auto;
  border-spacing: 5px 0;
}

Я использовал border-spacing чтобы вы могли видеть разделение для каждой ячейки. Это назначается только левой и правой сторонам каждой ячейки.

jsBin

Вы можете использовать этот код для внутреннего DIV:

.con div {
display: table-cell;
border: 1px solid gray;
width: 50px;
}

используйте этот код css для этого html ,,,,

.con
 {
  border: 1px solid gray;
  text-align: center;
  width:400px;
  height:160px;
}

.con div  {
  display:inline-block;
  border: 1px solid gray;
  width: 50px;
  height:100%;
  position:float;
  overflow:hidden;

 }