12 replies

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?

flex-grow - Maintain aspect ratio - Kevin Powell - Community