how to get position absolute div height in css

Question

Parent div has two child div . First child div is position absolute div which contains img element. first-child div is background with food image and second div is food description.

When screen size changes, position absolute first-child div and second div should be same height.

 .parent { display: flex; justify-content: flex-end; position: relative; }.first-child { position: absolute; top: 0; left: 0; width: 100%; z-index: -1; }.second-child { position: relative; width: 250px; /* want to set height with the same height of.first-child div */ }

 <div class="parent"> <div class="first-child"> <img src="food.png" /> </div> <div class="second-child"> // food description here. </div> </div>

I want to set second child div 's height as same height of first position absolute child div .

How to achieve this?

Answer 1

This probably isn't 100% what you're looking for, but it's the closest I could come up with using my own experience of using images as backgrounds for text.

I used floats rather than flexbox, setting a background image instead of img element and the height of the parent container to 100vh (in this case)

I then set the height of both children to 100%

HTML

<div class="parent">
      <div class="first-child">
      </div>
      <div class="second-child">// food 
description here.</div>
    </div>

CSS

.parent {
  position: relative;
  height: 100vh;
  background-image: url(/food.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.first-child {
  width: 60%;
  height: 100%;
  float: left;
}

.second-child {
  width: 40%;
  height: 100%;
  float: left;
  /* want to set height with the same 
height of .first-child div */
}

Hope that helps, if it absolutely must be flexbox you'll need a different solution.