.modal {
  border: 3px dotted green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

.modalContents {
  display: flex;
  flex-direction: column;
}

.topContents {
  border: 1px solid red;
  overflow: scroll;
}
  
.bottomContents {
  border: 1px solid blue;
}

<div class="modal">
  <div class="modalContents">
    <div class="topContents">
         top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top 
    </div>
    <div class="bottomContents">
        bottom
    </div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I want to let .bottomContents div located bottom of modal div, and .topContents div takes all rest spaces. But as you see, because of length of .topContents div, contents overflows.

How can I make it not overflow?

CodePudding user response：

Set a height:100%; on .modalContents and .topContents, if no height it will just stretch.

.modal {
  border: 3px dotted green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
}

.modalContents {
  display: flex;
  flex-direction: column;
  height:100%;
}

.topContents {
  border: 1px solid red;
  overflow: scroll;
  height:100%;
}
  
.bottomContents {
  border: 1px solid blue;
}

<div class="modal">
  <div class="modalContents">
    <div class="topContents">
         top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top top 
    </div>
    <div class="bottomContents">
        bottom
    </div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>