CODEWITHSUNDEEP
htmlcss
central.dogma
central.dogma

Reputation: 3

Flexbox container with long contents overflows out of parent container even after using overflow: scroll

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

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?

Upvotes: 0

Views: 37

Answers (1)

MaxiGui
MaxiGui

Reputation: 6348

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>

Upvotes: 1

Related Questions