-2

Is there a way with only css to make the height of the div across multiple divs the same height?

The html looks like:

<div class="main_wrapper">
    <div class="wrapper">
        <div class="content"></div>
        <div class="meta"></div>
    </div>
    <div class="wrapper">
        <div class="content"></div>
        <div class="meta"></div>
    </div>
</div>

I want the div.wrapper and the div.content to be the same height across the divs. The div.content height is variable in height and I would like the css to pick up the height of the tallest div.content and apply it to all the other div.content divs. I have added an image to illustrate what I mean.

Is this possible?

enter image description here

Daniil Vnoutchkov
  • 19
  • 4
  • It does not answer the question. The main question is; how do I make sure that the div.content divs are exactly the same height. The link you posted only ensures that the outer div is the same height. – Daniil Vnoutchkov Sep 16 '21 at 10:13
  • If the height of the `.meta` elements is always the same - then make the `.wrapper` a flex element, too, and apply `flex-grow:1` to `.content`. – CBroe Sep 16 '21 at 10:20
  • .meta is flexible in height as well – Daniil Vnoutchkov Sep 16 '21 at 10:24
  • Then you will probably have to go with grid instead of flexbox. – CBroe Sep 16 '21 at 10:25
  • *I would like the css to pick up the height of the tallest div.content* , this is a javascript job , not CSS . If div.content where siblings there could be possibilities, but it is not the case here. We have grid (or flex) but not subgrids yet ;) You may clarify your question with a real example, or explain about that span and size it can have too (your screen shows div.content taking the lowest height but wrapper taking the highest height !? – G-Cyrillus Sep 16 '21 at 10:41

1 Answers1

-3
.main_wrapper{
      display:flex;
    }
Aman Sharma
  • 933
  • 1
  • 4
  • 12