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
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:
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.