I have a modal with an image on the left and several comments on the right, but on the right I wish there was scroll as the comments did not fit in the modal. So I have this row with several rows inside that will be the comments, but the scroll does not appear and the content is hidden.
CSS
#comentarios{
margin-top: 5px;
margin-right: 5px;
overflow:visible;
}
#myModal{
max-height: 540px;
overflow: hidden;
}
<div class="modal" id="myModalProva" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document" >
<div class="modal-content" >
<div class="modal-body" id="modal-prova" style="padding:0;" >
<div class="row">
<div class="col-7">
IMAGEM
</div>
<div class="col-5" >
<div class="row" id="comentarios">
<div class="row" id="comentarios">
<div class="row">
<div class="col">
<p> - Esse é um teste de um comentário </p>
</div>
</div>
<div class="row">
<div class="col">
<p> - Esse é um teste de um comentário </p>
</div>
</div>
<div class="row">
<div class="col">
<p> - Esse é um teste de um comentário </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In the first image the modal is with visible overflow realize that the modal is bigger than the size of the image even if I have set the maximum size of the modal with the size of the photo
NowIhaveoverflowhiddeninmodalandithidesthecometintherightdiveventheoverflowofthatdivbeinghidden
Nowtheoverflowofthecommentsdivisscrolling,nowyoucanseethatitcutsthecommentsanddoesnotshowthescroll.