CSS aspect-ratio not maintained when parent container's height exceeds limit

Question

I'm working on a layout where a child element inside a parent container must always maintain a 16:9 aspect ratio. The parent container's size can be dynamically adjusted through JavaScript, and the child should adapt its dimensions accordingly. Here's the problem:

1. When I increase the width of the parent container, the child adjusts correctly, maintaining the aspect ratio.
2. However, when I increase the height of the parent container significantly, the child's height grows beyond the aspect ratio constraints, breaking the layout.

Here’s a minimal reproducible example of my code:

var height = 90;
var width = 160;

function increaseHeight() {
  height += 100;
  document.getElementById('parent').style.height = height + 'px';
}

function increaseWidth() {
  width += 100;
  document.getElementById('parent').style.width = width + 'px';
}

#parent {
  height: 90px;
  width: 160px;
  background-color: red;
  display: flex;
  justify-content: center;
  /* tried to add: align-items: center; - it makes the child disappear. */
}
#child {
  height: auto; /* tried also: max-height: 100%; */
  max-width: 100%;
  aspect-ratio: 16 / 9;
  background-color: yellow;
  object-fit: contain;
}

#buttons {
  position: fixed;
  left: 1em;
  top: 1em;
}

<div id="parent">
  <div id="child"></div>
</div>
<div id="buttons">
  <button onclick="increaseHeight()">increase height</button>
  <button onclick="increaseWidth()">increase width</button>
</div>

How can I ensure that the child always maintains the 16:9 aspect ratio, regardless of the parent's dimensions, and without disappearing or breaking? Any help would be appreciated!

Answer 1

Yes. It would be nice to be able to use object-fit: contain, but that only works on replaced elements like images and videos. Elements which have intrinsic dimensions and therefore an intrinsic aspect ratio.

However, there is an alternative technique which works on any element. It uses absolute positioning.

var height = 90;
var width = 160;

function increaseHeight() {
  height += 100;
  document.getElementById('parent').style.height = height + 'px';
}

function increaseWidth() {
  width += 100;
  document.getElementById('parent').style.width = width + 'px';
}

#parent {
  height: 90px;
  width: 160px;
  background-color: red;
  position: relative;
}

#child {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  background-color: yellow;
  aspect-ratio: 16/9;
}

#buttons {
  position: fixed;
  left: 1em;
  top: 1em;
}

<div id="parent">
  <div id="child"></div>
</div>
<div id="buttons">
  <button onclick="increaseHeight()">increase height</button>
  <button onclick="increaseWidth()">increase width</button>
</div>