Flexbox square items independent of item count

Question

I use some inline styling in the HTML Doc. I would like to achieve a flexbox with n divisions where divs are squared. Within these divs I want to add certain images (here a placeholder)

I was looking up some other threads where there was padding used as a measure to adjust the box "height" since it is calculated upon width. However this solution only expands the current box in height (outlined with the blue border).

Has anyone a tip on how to avoid this?

EDIT: Apparently the padding solution works while using units like vh and vw instead of percentage and as long as I do not insert an image

.container {
  position: relative;
  width: 90%;
  max-height: 35%;
  display: flex;
  margin: 5%;
  border: 5px solid black;
  justify-content: space-around;
}

.box {
  position: relative;
  width: 100%;
  margin: 2.5%;
  border: 5px solid blue;
  overflow: hidden;
}

.image {
  position: relative;
  width: 100%;
}

segFault · Accepted Answer

To manage this, there is a little known trick (tbh I didn't know you could do this) with setting an aspect ratio on divs of unknown/dynamic widths. See this article.

I ended up adding position: absolute for the images to not mess with the height of the divs after applying this 1:1 ratio for your scenario:

.box:before {
  content: "";
  float: left;
  padding-top: 100%;    /* initial ratio of 1:1*/
}

This might be what you are trying to do:

.container {
  position: relative;
  width: 90%;
  max-height: 35%;
  display: flex;
  margin: 5%;
  border: 5px solid black;
  justify-content: space-around;
}

.box {
  position: relative;
  width: 100%;
  margin: 2.5%;
  border: 5px solid blue;
  overflow: hidden;
}

.box:before {
    content: "";
    float: left;
    padding-top: 100%;  /* initial ratio of 1:1*/
}

.image {
  position: absolute;
  width: 100%;
}

Flexbox square items independent of item count

Answers (2)

Related Questions