html - Set child width relative to its parents height in pure css

Question

Since I am new to webprogramming, i have not yet gained much experience in css. Currently I am building a web application with a resizable header. Therefore I wanted to know if it is possible to set a child divs width relative to the height of its parent div.

I know how to handle the problem in javascript code, but I would prefer a pure css solution.

The css code would look something like this:

.parent {
   position: relative;
   height: 200px;
   width: 600px;
 }
 .parent .resized {
   height: 100px;
 }

 .child {
   position: absolute;
   height: 20%;
   width: 10% [of parent height];
 } 

The HTML code looks like this:

<div class="parent">
  <div class="child"></div>
</div>

Currently the childs width stays the same, since the width of the parent stays the same. I would like the childs width to get smaller when the parent height resizes.

Thanks in advance.

Answer 1

Just assign your parent's height property value to a css variable and then use calc() to assign your child element's width to a value that is 10% of your parent's height.

Check and run the Code Snippet below for a practical example of what I have described above:

.parent {
   position: relative;
   --parentHeight: 300px;
   height: var(--parentHeight);
   width: 600px;
   background-color: red;
 }
 .parent .resized {
   height: 100px;
 }

 .child {
   position: absolute;
   height: 20%;
   width: calc(var(--parentHeight) / 10);
   background-color: green;
 }

<div class="parent">
  <div class="child"></div>
</div>