I have some HTML code that looks like this:
<div class="ex">
<div class="ex0">
<div class="ex1">
<div class="ex2">
....
</div>
<div class="ex3">
....
</div>
</div>
</div>
</div>
ex0 is positioned absolutely, while ex1, ex2, and ex3 are relatively positioned. ex0 and ex1 have overflow set to auto. Additionally, ex1 has a minimum height of 480px and ex2 has a height of 100%.
I have two questions:
- How can we ensure that ex3 is always aligned at the bottom of the ex1 div? I've tried using min height on ex2, but it's not the ideal solution as it distorts the boxes when viewing in flexbox or absolute position. Is there another way to achieve this alignment?
- When I resize the window to a smaller height, the scrolling stops working properly. It gets stuck around one-quarter down the div. Any idea why this might be happening?
Below is the CSS for reference:
.ex {
position: absolute;
min-width: 1000px;
min-height: 480px;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
z-index: 200;
background: #262626;
}
.ex0 {
box-sizing: border-box;
position: absolute;
display: block;
width: 430px;
right: 0px;
top: 0px;
bottom: 0px;
padding: 0px;
margin: 0px;
border-left: 2.5px solid #1c1c1c;
overflow: auto;
}
.ex1 {
position: relative;
height: 100%;
padding: 52.5px 65px 40px 50px;
overflow: auto;
}
.ex2 {
min-height: calc(100% - 250px);
}
.ex3 {
position: relative;
width: 100%;
}