具有扩展高度的 CSS 长宽比，用于溢出内容

Question

I have a CSS aspect ratio preserving box, however I am trying to make it so the height of the box will expand if the child's height is greater than the aspect ratio's height.

Here's what I currently have:

 const box = document.querySelector(".box"); const inner = box.querySelector(".box-inner"); const content = box.querySelector(".box-content"); function updateBox() { const innerRect = inner.getBoundingClientRect(); const contentRect = content.getBoundingClientRect(); const expandHeight = contentRect.height > innerRect.height; inner.style.paddingBottom = expandHeight ? "0" : "100%"; inner.style.height = expandHeight ? "auto" : "0"; content.style.position = expandHeight ? "relative" : "absolute"; } updateBox(); window.addEventListener("resize", updateBox);

 .box { width: 100%; max-width: 100px; background-color: pink; position: relative; } .box-inner { height: 0; padding-bottom: 100%; } .box-content { position: absolute; top: 0; left: 0; width: 100%; }

 <div class="box"> <div class="box-inner"> <div class="box-content"> <div style="width: 50%; height: 125px; background-color: rgba(255, 0, 0, 0.5)"> content </div> </div> </div> </div>

This works, however when the window resizes the box flickers. Is there a way to solve this?

Answer 1

>= (greater than or equal to) solves the issue

contentRect.height >= innerRect.height

 const box = document.querySelector(".box"); const inner = box.querySelector(".box-inner"); const content = box.querySelector(".box-content"); function updateBox() { const innerRect = inner.getBoundingClientRect(); const contentRect = content.getBoundingClientRect(); const expandHeight = contentRect.height >= innerRect.height; inner.style.paddingBottom = expandHeight ? "0" : "100%"; inner.style.height = expandHeight ? "auto" : "0"; content.style.position = expandHeight ? "relative" : "absolute"; } updateBox(); window.addEventListener("resize", updateBox);

 .box { width: 100%; max-width: 100px; background-color: pink; position: relative; } .box-inner { height: 0; padding-bottom: 100%; } .box-content { position: absolute; top: 0; left: 0; width: 100%; }

 <div class="box"> <div class="box-inner"> <div class="box-content"> <div style="width: 50%; height: 125px; background-color: rgba(255, 0, 0, 0.5)"> content </div> </div> </div> </div>