Como fazer um container flex ter a largura dos divs internos? – html css css3

Boa tarde, estou criando um layout com height:100% onde tenho 2 grupos, e dentro de cada grupo alinho as DIVs verticalmente e se alguma DIV não couber no height máximo ou houver resize da página, ele vai pra outra coluna, como no exemplo:

https://jsfiddle.net/ErickV/xqkujqv8/

Observe que o 2º grupo está sobrepondo a 2º coluna na frente do 1º grupo.
Gostaria que o 2º grupo inicie depois (à direita) da última coluna do 1º grupo. Tem algo errado ou que poderia ser ajustado no CSS?

Fiz uns ‘ajustes técnicos’ via JavaScript pegando a distância da última div contida no 1º grupo e setei um left no 2º grupo, e se tivesse um 3º grupo, eu repetia esse processo entre o 2º e 3º e assim sucessivamente. Achei muita gambiarra.

ErickV , fiz alguns teste utilizando o código que você disponibilizou e só consegui setando um valor para a largura(width) do grupo 1, em resumo a quando a segunda coluna do grupo 1 é criada a largura não se ajusta aos novos itens, e assim a o grupo 2 sobrepõe a nova coluna criada.

Creio que ao invés de ajustar o left do grupo 2, você pode setar um novo valor para a largura do grupo 1.

Explicando de uma forma mais clara, Atribui o valor de 250px para o grupo um direto no css para a propriedade width.

#group1 {width:250px;}

Utilizei o ID para que só o grupo 1 tenha essa nova largura, porém, acredito que essa forma só é interessante quando você consegue identificar a quantidade de colunas que um grupo tem.

Pois assim você conseguira fazer o calculo e setar um novo valor pro width através do .css() do jquery.

OBS: o valor de 250 , seria o calculo (122+3)*2 = 250.
122px de largura + 3 de margin, vezes a quantidade de coluna, neste caso duas !

Olá @ErickV!

Acho que apenas adicionando este código com JQuery, seu problema é resolvido! Basicamente o que ele faz é calcular a distância do último filho e calcular a nova largura do seu grupo quando o documento carrega ou quando a janela é redimensionada.

$(window).on('resize',function() {
    $('.tile-grid').each(function( index ) {
         var lastChild = $(this).children().last();
         var newWidth = lastChild.position().left + $(this).position().left + lastChild.outerWidth(true);
         $(this).width(newWidth);
    })
});
$(document).ready(function() {
    $(window).trigger('resize');
});

Segue abaixo um exemplo com o seu próprio código:

$(window).on('resize',function() {
	$('.tile-grid').each(function( index ) {
		 var lastChild = $(this).children().last();
		 var newWidth = lastChild.position().left + $(this).position().left + lastChild.outerWidth(true);
		 $(this).width(newWidth);
	})
});

$(document).ready(function() {
    $(window).trigger('resize');
});

html,
body {
  margin: 0;
  padding: 0px
}

* {
  height: 100%;
}

.tile-container {
  display: block;
}

.tile-group {
  height: 100%;
  display: inline-block;
  margin-left: 3px;
  position: relative;
}

.tile-group .title {
  color: #626262;
  font-size: 24px;
  font-weight: 400;
  position: absolute;
  left: 4px;
}

.tile-grid {
  margin-top: 46px;
  height: calc(100% - 46px);
  position: relative;
  border: 0px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}

.tile-item {
  width: 122px;
  height: 122px;
  position: relative;
  display: block;
  float: left;
  margin: 3px;
  box-shadow: inset 0 0 1px #FFFFCC;
  cursor: pointer;
  overflow: hidden;
}

#group1 .tile-item {
  background-color: red;
}

#group2 .tile-item {
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tile-container" class="tile-container">
  <div id="group1" class="tile-group">
    <span class="title">Grupo 1</span>
    <div class="tile-grid">
      <div class="tile-item">
        <label class="tile-item-titulo">Test</label>
      </div>

      <div class="tile-item">
        <label class="tile-item-titulo">Test</label>
      </div>

      <div class="tile-item">
        <label class="tile-item-titulo">Test</label>
      </div>

      <div class="tile-item">
        <label class="tile-item-titulo">Test</label>
      </div>

      <div class="tile-item">
        <label class="tile-item-titulo">Test</label>
      </div>

      <div class="tile-item">
        <label class="tile-item-titulo">Test</label>
      </div>

    </div>
  </div>

  <div id="group2" class="tile-group">
    <span class="title">Grupo 2</span>
    <div class="tile-grid">
      <div class="tile-item">
        <label class="tile-item-titulo">Test</label>
      </div>

      <div class="tile-item">
        <label class="tile-item-titulo">Test</label>
      </div>

    </div>
  </div>


</div>

#container-de-caixas {
    display: table;
    width: 1158px;
}
#caixa-1 {
    width: 578px;
}
#caixa-2 {
    width: 386px;
}
#caixa-3 {
    width: 194px;
}
#caixa-1, #caixa-2, #caixa-3 {
    min-height: 210px;
    padding-bottom: 20px;
    display: table-cell;
    height: auto;
    overflow: hidden;
}

• o container deve ter display:table
• As caixas dentro devem ser: display:table-cell
• Não use float.