Inner div with square ratio and flexbox [duplicate]

Answer 1

If you rotate by 90deg, it's possible :)

• variable width and height of the parent (and ratio)
• child is always 50% as tall as its parent
• and a square

It'll surimpose to other content if it wants to because of the transform though.

⇒ Codepen

.flex {
  display: table-cell; /* allows "vertical" centering (not possible with flex/grid here because of the padding-top trick on child) */
  width: 12rem;
  height: 20rem;
  vertical-align: middle; /* "vertical" centering */
  transform: rotate(90deg) translateY(-50%); /* vertical becomes horizontal */
  background-color: lightblue;
}

.flex.large {
  height: 35rem;
}

.item {
  width: 50%;
  height: 0;
  margin-left: 25%; /* "horizontal" centering */
  padding-top: 50%; /* padding-top trick for a square */
  background-color: lightyellow;
}