How to adjust inner div height based on window resize?

Question

I have one outer div and three inner div. When I reduced the size of window 3rd inner div content gets overflow due to 2nd inner div . How make them proper so that 3rd inner div should not overflow and scroll needed in 3rd inner div only.

     <div className="order-body-container">
        <div className="order-header-text">
           / some content/
        </div>
        <div className="order-section-header">
            / some content in this collapsable header/
        </div>
         <div className="order-display-half-view"> 
            / some content/
      </div>

.order-body-container {
  display: block;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.order-header-text {
  min-height: 5%;
  position: relative;
  width: 100%;
}

.order-section-header {
  min-height: 5%;
  padding: 3px;
  position: relative;
  width: 100%;
}
.order-display-half-view {
  display: block;
  height: 60%;
  position: relative;
  width: 100%; 
}

when 3rd inner div height 60% , it is perfect window resize 3rd inner div gets overflow

Answer 1

To achieve the desired behavior where the third inner div (order-display-half-view) has its own scroll when its content overflows without affecting the layout of other divs, you can set its overflow-y property to auto. This will enable vertical scrolling when needed. Here's how you can modify your CSS:

.order-body-container {
  display: block;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.order-header-text {
  min-height: 5%;
  position: relative;
  width: 100%;
}

.order-section-header {
  min-height: 5%;
  padding: 3px;
  position: relative;
  width: 100%;
}

.order-display-half-view {
  display: block;
  height: 60%;
  overflow-y: auto; /* Enable vertical scrolling when content overflows */
  position: relative;
  width: 100%; 
}

With this modification, when the content of the third inner div exceeds its height, a vertical scrollbar will appear, allowing users to scroll through the content without affecting the layout of other elements.

Answer 2

To ensure that the third inner div (order-display-half-view) retains its scroll functionality even when the window size is reduced, you need to adjust its CSS to make it responsive. You can achieve this by setting a maximum height and allowing overflow-y to auto, ensuring that the content remains scrollable within the defined height. Here's how you can modify your CSS:

.order-display-half-view {
  display: block;
  height: 60%; /* Or any other appropriate height */
  max-height: calc(100% - 10%); /* Maximum height considering the heights of the other elements */
  overflow-y: auto; /* Enable vertical scrolling when content overflows */
  position: relative;
  width: 100%;
}

By setting the max-height property of the third inner div to calc(100% - 10%), we ensure that it doesn't exceed 60% of the viewport height minus the heights of the other elements (5% for each of the first two inner divs, totaling 10%). This allows the third inner div to be responsive to changes in window size while still providing a scrollable area for its content.