How to make 2 divs the same height-CodePudding

I am trying to get 2 divs that do not have a common parent div to be the height of the larger div. (using display: flex).

As shown in the above code, I would like <child-div1> and <child-div2> to have the same height. Currently, I have display: flex on the <parent-div> which successfully makes <middle-div1> and <middle-div2> to have the same height. However, I can't seem to figure out how to ensure that <child-div1> and <child-div2> have the same height.

<parent-div style = "display: flex">
    <middle-div1>
        <child-div1></child-div1>
   </middle-div1>
    <middle-div2>
        <child-div2></child-div2>
    </middle-div2>
</parent-div>

CodePudding user response：

In order to figure it out you could right click in the page, then select inspect element, and you going to see a window like this:

by clicking the most left icon and hovering over the two divs, you are going to see the exact width x height

CodePudding user response：

Add display: flex to the <middle-div> flex items.

This will automatically apply align-items: stretch to the <child-div> children. (Just note that a height rule will override align-items: stretch.)

CodePudding user response：

With that layout, you can set both children to have height: inherit; it's inheriting the height from the tallest part of the container. So for example, if you have an image on one side that is 400 px tall, that stretches the container, therefore, allowing the other child to grow in height also.

.container {
  display: flex;
}

.one, .two {
  height: inherit;
  width: 50%;
}

.one {
  background-color: lightblue;
}

.two {
  background-color: darkgreen;
  color: white;
}

<div >
  <div >1<br><img src="https://dummyimage.com/400x400/000/fff&text=test"></div>
  <div >2</div>
</div>

CodePudding user response：

One solution is to add height:100%; to child-div1 and child-div2

<parent-div style = "display: flex">
    <middle-div1>
        <child-div1 style="height: 100%;"></child-div1>
   </middle-div1>
    <middle-div2>
        <child-div2 style="height: 100%;"></child-div2>
    </middle-div2>
</parent-div>