CSS - Scale flexbox content to fit

Question

Let's say I have a flexbox that I fill with some squares...

const init = () => {
  const container = document.querySelector('.container')
  for(const i of Array(70).keys()){
    const square = document.createElement('div')
    square.classList.add('square')
    container.appendChild(square)
  }
}

init()

* {
  box-sizing: border-box;
}

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.square{
    background-color: orange;
    height: 8em;
    width: 8em;    
    margin: .2em;
    perspective: 1000px;
}

<div class="container">
</div>

I now want these squares to shrink until all fit into a non-scrolling container (while maintaining aspect ratio, of course).

How do I do that?

CSS grid would be better here, related: https://stackoverflow.com/a/54125439/8620333 — Temani Afif, Jul 01 '20 at 12:50
I agree with Temani. Flex boxes are meant to be sized along one dimension. If you need to size along two dimensions, Grid boxes are a better option. — Chong Lip Phang, Jul 01 '20 at 13:01

score 0 · Answer 1 · answered Jul 01 '20 at 13:49

This is a very manuel solution. If you set mainContainer's width and height properly, it will keep pace.

const init = () => {
  const container = document.querySelector('.container');
  const l = 70; //how many element you want
  const h = container.clientHeight;
  const w = container.clientWidth;
  for(const i of Array(l).keys()){
    const square = document.createElement('div')
    square.classList.add('square');
    const x = parseInt(Math.sqrt((w*h) / (l)));
    const xcount = Math.ceil(w/x);
    const xLength = Math.ceil(w / xcount);
    const ycount = Math.ceil((l/xcount));
    const yLength = parseInt(h / ycount);
    const edge = Math.min(xLength, yLength);
    square.style.width = edge + "px";
    square.style.height = edge + "px";
    container.appendChild(square)
  }
}

init()

* {
  box-sizing: border-box;
}

.mainContainer{
  width: 500px;
  height: 150px;
  min-height: 100%;
  background-color: #dfdfdf;
}

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.square{
    background-color: orange;
    border: solid 1px;
    height: 1px;
    width: 1px;    
}

<div class="mainContainer"><div class="container">
</div></div>

score 0 · Answer 2 · answered Jul 01 '20 at 14:50

I tried this but when you resize require to reload in order to make clientWidth detect and predict the height and width of boxes

(function(){
    const init = () => {
        const container = document.querySelector('.container')
        for(const i of Array(70).keys()){
            const square = document.createElement('div')
            square.classList.add('square')
            var w = document.body.clientWidth;
            if (w > 800){
                square.style.width = w / 385 + 'em';
                square.style.height = w/ 395 + 'em';
                square.style.margin = .3 + 'em';
            } else {
                square.style.width = w / 475 + 'em';
                square.style.height = w/ 485 + 'em';
                square.style.margin = .2 + 'em';
            }
            container.appendChild(square)
        }
    }
init()
}())

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.container {
    position: relative;
    max-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.square{
    background-color: orange;
    perspective: 1000px;
}

<div class="container"></div>

CSS - Scale flexbox content to fit

2 Answers2