-2
.box {
display: flex;
height: 200px;
max-height: 50%;
margin: 10%;
background-color: aqua;
overflow: scroll;
}
.item {
width: 50%;
}
.esquerda {
background-color: brown;
}
.direita {
background-color: tomato;
}
<div class="box">
<div class="item">
<div class="esquerda">
esquerda
</div>
</div>
<div class="item">
<div class="direita">
direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>
direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>direita<br>
</div>
</div>
</div>
Are you going to use colors to know if one div is the same height as the other? You could use a color in the right div and a color in the whole box, giving the impression that the two Divs are of the same height.
– Sam
This is a basic example that I made for you to understand the problem. The original modal could not do this. It has another background color, margin, etc...
– Laiane Hermes
A suggestion with flex: https://answall.com/a/325574/3635 (as you added the tag)
– Guilherme Nascimento
Yes, the flex by default leaves everyone the same size. Only my problem happens when I have scroll on that parent div.
– Laiane Hermes
Using Javascript you can:
document.querySelector(".esquerda").style.height = document.querySelector(".direita").offsetHeight+"px";
, but already has a jQuery version in this answer– Sam
I would like to solve the problem in css itself, but as a native alteration if I can’t, I will use this solution anyway. It came out right, thank you :D
– Laiane Hermes
@Laianehermes just create a "grandfather" element and place the overflow on it, and on the parent element put the display:flex, example: https://answall.com/a/325653/3635
– Guilherme Nascimento