flex-grow - Maintain aspect ratio

Suppose i have the following:

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100px;
  height: 100px;
  flex-grow: 1;
}

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  width: 100px;
  height: 100px;
  flex-grow: 1;
}

How can i ensure that not only the width of the children grows, but also the height grows so that the aspect ratio is maintained?

8 Replies

b1mind•2y ago

use grid xD Yea I mean I know being told to use a different tool is a bit crass but use the right tools for the right job

bob_merlinOP•2y ago

yeah i just have less experience with grid, which is why i tried it with flexbox 😄

b1mind•2y ago

unless you wanted the flex wrap with different alignment grid would probably work best.

b1mind•2y ago

https://codepen.io/b1mind/pen/wvmYmzx

Brent Morton

CodePen

Aspect Raito

...

b1mind•2y ago

update with a auto fit template basic example I had already but hope it helps

bob_merlinOP•2y ago

thank you, i will look into it

b1mind•2y ago

if you didn't want them to grow at all you can replace auto-fit with auto-fill

bob_merlinOP•2y ago

ok the issue was that i had a fixed width/height. This prevents them from growing on w/h in both flex and grid. plus: i have to use the aspect-ratio prop

Gaming

Programming

flex-grow - Maintain aspect ratio