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>