how to use css flex to have a row of squares that scales and keeps aspect ratios?-CodePudding

I am pulling my hair out over this, I feel like it should be simple and I get close but can't get this perfect. I am trying to create a row of squares that will keep their aspect ratio but just get smaller as their container size shrinks. The way that I have gotten closest is having my square have a height of 100% with an aspect-ratio: 1/1; and then its container has a flex display. this works but only for the height, if I scale the width, the flex container and it's content does not scale. I edited this to be easier to reproduce and used one of the provided solutions which got closest to what I am after.

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.game {
  width: 100%;
  max-width: 500px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header-container {
  background-color: grey;
  width: 100%;
  height: 15vh;
  max-height: 100px;
}

.row-container {
  background-color: green;
  width: 100%;
  height: 20vh;
  max-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

.square {
  aspect-ratio: 1/1;
  flex: 0 1 100px;
  background-color: blue;
  margin: 5px;
}

.board-container {
  background-color: aquamarine;
  width: 100%;
  height: 45vh;
}

.lower-container {
  background-color: black;
  width: 100%;
  height: 30vh;
  max-height: 250px;
}

<div >
  <div >

  </div>

  <div >
    <div >
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    </div>
  </div>

  <div >

  </div>

  <div >

  </div>
</div>

I provided all the css but what i am trying to fix is in .square and .row and .row-container

CodePudding user response：

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

.square {
 aspect-ratio: 1/1;
 flex: 0 1 55px;
 background-color: blue;
 margin: 10px;
}

<div id="container">
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
  <div ></div>
</div>

Not quite sure if that's what you are looking for. Can you just provide a brief example of your use-case?

CodePudding user response：

I may have misunderstood your question, but are you sure it doesn't scale? Here it is when I set the width to 100%:

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

.square {
 background-color: orange;
 width: 100%;
 height: 100%;
 max-height: 55px;
 aspect-ratio: 1/1;
}

<div id="container">
  <div >a</div>
  <div >a</div>
  <div >a</div>
  <div >a</div>
  <div >a</div>
  <div >a</div>
</div>