Issue
In this example child2 has dynamic data which can be increase or decrease, and child3 has fixed height. main parent has dynamic window height, so I want child2 will show entirely without having scroll until whole remaining spaced got covered and child1 should cover remaining space with scroll inside.
.parent {
display: flex;
height: 100%;
flex-direction: column;
}
.child1 {
overflow: auto;
display: flex;
flex-direction: column;
background: red;
}
.child2 {
display: flex;
flex-direction: column;
background: blue;
}
.child3 {
display: flex;
flex-direction: column;
background: orange;
}
<div class="parent">
<div class="child1">data</div>
<div class="child2">dynamic data</div>
<div class="child3">fixed data</div>
</div>
Solution
.mainCon{
height: 390px;
width: 200px;
border: 1px solid;
}
.upperBox{
height: calc(100% - 50px);
display: flex;
flex-direction: column;
}
.remaining{
background-color: blue;
flex-grow: 1;
overflow: auto;
height: 10px;
}
.adjustable{
background-color: green;
overflow: auto;
max-height: calc(100% - 10px);
}
.fixed{
height: 50px;
background-color: red;
}
<div class="mainCon">
<div class="upperBox">
<div class="remaining">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
<div class="adjustable">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
</div>
</div>
<div class="fixed">
</div>
</div>
Answered By - Mandeep Kaur
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.