Tengo un modal estructurado de la siguiente manera:
<div class="modal fade" id="editSaga" tabindex="-1" role="dialog"> <div class="modal-dialog modal-lg modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-body row"> <div class="col-7 firstchild"> <div class="firstchild-header"> </div> <div class="firstchild-body1"> // some content </div> <div class="firstchild-body2"> // some other content </div> </div> <div class="col-5"> </div> <div> </div> </div> Quiero hacer que el firstchild-body2 se desplace cuando su contenido va más allá del contenido del padre, que es la class col-7 con el siguiente estilo:
.col-7 { max-height: 100%; overflow: hidden; }Traté de usar jquery y obtener su altura de esta manera:
$(".firstchild-body2").height(`$("#editSaga .modal-content").height()` - $(".firstchild- header").outerHeight() - $(".firstchild-body1").outerHeight()); pero no funciono porque siempre incluyo la altura de los elementos desbordantes. Luego cambié $("#editSaga .modal-content").height() a $(".col-7").height() . pero esta solución tampoco funciona en absoluto. Cualquier ayuda sería muy apreciada.
Hice un ejemplo de código de trabajo para usted aquí: https://codepen.io/solutionsswift/pen/GRvxLOd
Para aplicar el desplazamiento correcto dentro del firstchild-body2, debe establecer su altura en automático. También necesita establecer la altura máxima para el col-7.
Con JS, puede establecer el valor de altura máxima en el elemento firstchild-body2 para que pueda aplicar la barra de desplazamiento automáticamente.
¡No olvide configurar overflow: auto en el body2!
const header = document.querySelector('.firstchild-header'); const body1 = document.querySelector('.firstchild-body1'); const body2 = document.querySelector('.firstchild-body2'); const col7 = document.querySelector('.col-7'); // Set the max-height = total height of col-7 minus the height of header and body2.style.maxHeight = col7.offsetHeight - header.offsetHeight - body1.offsetHeight + 'px'; .modal-body { height: 100%; max-height: 80px; } .col-7 { overflow: hidden; width: 100px; height: auto; background-color: red; } .firstchild-body2 { box-sizing: border-box; overflow-y: auto; height: auto; } <div class="modal-dialog modal-lg modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-body row"> <div class="col-7 firstchild"> <div class="firstchild-header"> header </div> <div class="firstchild-body1"> Body 1 </div> <div class="firstchild-body2"> Body 2 sdfsdf sfsdf ssdf sf sd fsd fs fs fs fs </div> </div> <div class="col-5"> </div> <div> </div> </div>