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

Navigation
13

Good afternoon, I'm creating a layout with height:100% where I have 2 groups, and within each group I align the DIV s vertically and if any DIV does not fit in height max or there is resize da page, it goes to another column, as in the example:

link

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

I made 'technical adjustments' via JavaScript by taking the distance from the last div contained in the 1st group and set a left in the 2nd group, and if I had a 3rd group, I would repeat this process between 2nd and 3º and so on. I found a lot gambiarra .

    
asked by anonymous 06.10.2016 / 17:24

3 answers

1

ErickV, I did some testing using the code that you provided and I only managed to set a value for the width of group 1, in summary when the second column of group 1 is created the width does not fit the new items , and so group 2 overlaps the newly created column.

I think that instead of setting the left of group 2, you can set a new value for the width of group 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, but I think this form is only interesting when you can identify how many columns a group has.

Well, you can do the calculation and set a new pro width value through the jquery .css ().

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

    
04.11.2016 / 14:25
0

Hello @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');
});

Here 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><divid="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>
    
12.06.2017 / 17:58
0
#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 inside boxes should be: display: table-cell
  • Do not use float.
17.08.2017 / 21:56
How to handle exception in a Webview? Translations dictionaries should use the original strings as keys?