How to make a flex container have the width of internal Ivs?

Question

Good afternoon, I’m creating a layout with height:100% where I have 2 groups, and within each group I line up the DIVs vertically and if any DIV did not fit in the height maximum or there is resize page, it goes to another column, as in the example:

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

Note that the 2nd group is superimposing the 2nd column in front of the 1st group. I would like the 2nd group to start after (right) the last column of the 1st group. There is something wrong or that could be adjusted in the CSS?

I made some technical adjustments via JavaScript picking up the distance from the last div contained in the 1st group and I left in the 2nd group, and if I had a 3rd group, I would repeat this process between the 2nd and 3rd and so on. I found many gambiarra.

Answer 1

Erickv , I did some tests using the code you made available and only managed to set a value to the width(width) of group 1, in short when the second column of group 1 is created the width does not fit to the new items, and so group 2 overwrites the new column created.

I believe that instead of adjusting the left of the group 2, you can set a new value to the group width 1.

Explaining more clearly, Assigns the value of 250px to the group a direct in css to the width property.

#group1 {width:250px;}

I used the ID so that only group 1 has this new width, however, I believe that this form is only interesting when you can identify the number of columns that a group has.

So you can calculate and set a new value pro width through the jquery . css().

OBS: the value of 250 , would be the calculation (122+3)*2 = 250. 122px width + 3 margin, times the amount of column, in this case two !

Answer 2

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

• the container must have display:table
• The boxes inside should be: display:table-Cell
• Do not use float.

Answer 3

Hi @Erickv!

I think just by adding this code with Jquery, your problem is solved! Basically what it does is calculate the distance of the last child and calculate the new width of your group when the document loads or when the window is resized.

$(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');
});

Below is an example with your own code:

$(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>