Set child’s width to the height of the parent in pure CSS
Can I set the width of a
child-div equal to that of it’s
parent-div height in pure CSS?
So far, I have been doing in jQuery:
Is this achievable in Pure CSS? For some reasons, I need this to be in Pure CSS. Here’s my html:
Based on this specific demo, you could use viewport relative units and it will work as expected.
#parent-div has a height of
80% of the viewport, you can use
80vh to set
#child-div’s width to the same height. This clearly won’t work if
#parent-div doesn’t have a height of
80% of the viewport, though.
As an alternative, you would have to avoid rotating the child element, and just rotate the parent element and give the child element a height of