How to set the height of a div inside a modal in order to make it scroll?-CodePudding

I have a modal structured as followed:

  <div class="modal fade" id="editSaga" tabindex="-1" role="dialog">
<div >
    <div >
        <div >
            <div >
                <div >
                </div>
                <div >
                    // some content
                </div>
                <div >
                    // some other content
                </div>
            </div>
            <div >
            </div>
        <div>
    </div>
</div>

I want to make the firstchild-body2 content scroll when its content goes beyond the content of the parent which is the class col-7 with the following style:

.col-7 {
    max-height: 100%;
    overflow: hidden;
}

I tried to use jquery and get the its height this way:

$(".firstchild-body2").height(`$("#editSaga .modal-content").height()` - $(".firstchild- 
 header").outerHeight() - $(".firstchild-body1").outerHeight());

but I did not work because I always includes the height of the overflowing elements. Then I changed the $("#editSaga .modal-content").height() to $(".col-7").height(). but this solution also is not working at all. Any help would be highly appreciated.

CodePudding user response：

I made a working code example for you here: https://codepen.io/solutionsswift/pen/GRvxLOd

To apply the correct scroll inside the firstchild-body2, u need to set its height to auto. Also u need to set the maximum height for the col-7.

With JS u can set the max-height value on the firstchild-body2 element so that it can apply the scrollbar automatically.

Do not forget to set the overflow: auto on the 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>