How to make child relative to parent element's smaller dimension? - css

Question

When it comes to CSS units:
I know vmin is relative to 1% of the viewport's smaller dimension.
I know % is relative to the parent element.
Is there any way I can combine them to get a child whose height and width will be relative to 1% of the parent's smaller dimension?
I'm looking for a CSS only solution if at all possible, but if not possible, then a Javascript solution is fine.
EDIT: I do basically want to maintain aspect ratio. My specific case is the following:
Parent div takes up about 80% of the entire screen. Child div needs to remain square shaped (same height and width) as the parent is scaled up and down. But I would like the child to be as big as possible while maintaining the square aspect ratio, so its height and width need to be 100% of the parent's smaller dimension.
<div id = 'parent'>
<div id = 'child'>
</div>
</div>
See this image for a visual representation:

Answer 1

You can use something like this:
const size_by_smaller_dim_of = (target_element, source_element, percents = 100) => { // target_el: child, source_el: parent
let h = Math.min(source_element.getBoundingClientRect().width, source_element.getBoundingClientRect().height);
target_element.style.width = (h * percents / 100) + 'px';
target_element.style.height = (h * percents / 100) + 'px';
};