How to inherit height of a sibling

Question

Let's say I have a container div with 2 elements

<div class="container" >  

  <div class="section" ></div>
  <div class="text" >Some text</div>

</div>

My question is, how can I write the CSS so that the height of the .text div, containing all the text is as big as the .section div, so for example if

.section{
  height: 450px;
}

Then height for .text is also 450px. Or do I need javascript to do this

Make the `container` a flex parent. – disinfor May 18 '20 at 13:49 — disinfor, May 18 '20 at 13:49
column or row layout? so I can bring the correct duplicate – Temani Afif May 18 '20 at 13:51 — Temani Afif, May 18 '20 at 13:51

score 0 · Answer 1 · answered May 18 '20 at 13:49

0

You can give them both the same percentage height and then set the height based on the parent

.section {
  height: 50%;
  background: red;
}

.text {
  background: green;
  height:50%;
}

.container{
height:450px}

<div class="container">

  <div class="section"></div>
  <div class="text">Some text</div>

</div>

answered May 18 '20 at 13:49

aprouja1

In my particular example, the parent or both the children don't have a set height. The height of the .section element is decided by how many images are rendered inside (let's say the user decides that). Height of .container is decided by it's children (so .section) and then .text should be the same size as .section – Ryu May 18 '20 at 14:30

sosaN · Answer 2 · 2020-05-18T13:55:42.660

-2

You should put text div inside section div so it affect changes, like this:

 <div class="section" >
      <div class="text" >Some text</div>
    </div>

.section {
  height: 450px;
  background: red;
}

edited May 18 '20 at 13:55

answered May 18 '20 at 13:50

sosaN

2 Answers2