如何在底部垂直对齐div并自动溢出

Question

I have the following html

<div class="ex">
<div class="ex0">
<div class="ex1">
 <div class="ex2">
 ....
 </div>
 <div class="ex3">
 ....
 </div>
</div>
</div>
</div>

ex0 is absolutely positioned. ex1, ex2, ex3 are relatively positioned. ex0 and ex1 has overflow auto. ex1 has a min height of 480px; and ex2 has a height of 100%;

Two questions

• How do we make sure that ex3 is always aligned at the bottom of the div ex1? (I currently use min height on ex2, but I don't want to do that. I tried using flexbox, but the boxes get distorted when I do that. I tried absolute position, but when you make the screen smaller in height, the div overlaps the others.
• When I make the window smaller in height, the scrolling no longer works. I cannot scroll down the div. Does anyone know why? It gets stuck 1/4 down the div.

Here's the CSS:

.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%;
} 

Answer 1

Do change your "ex3" class by below changes for your first question's answer. It will place ex3 div at the bottom of page.

.ex3 {
    position: absolute;
    bottom: 0;
} 

About your second question. Scroll bar is displaying on browser screen when I created demo using html and css you provided in question. And when I resize screen for smaller height, scroll bar is persist on page.

Please check jsfiddle link to get more idea about it.

Answer 2

Delete .ex2 and write in .ex3:

.ex3 {position: absolute; width: 100%; bottom: 0;}

the scroll bar should be work!