CODEWITHSUNDEEP
htmlcssvertical-scrolling
mbassini
mbassini

Reputation: 13

Scrollable div in height changing modal

I have a Modal that changes its height (with a max-height too) depending on the amount of list items showed. And i have 2 div in the modal, one being static, and the other one contains the list and must be scrollable when needed.

The issue is that i can't make it scrollable without fixing it's height.

HTML

<div class="modal">
  <div class="static"></div>
  <div class="scrollable">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

CSS

body {
  margin: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  width: 300px;
  max-height: 400px;
  background-color: lightblue;
  padding: 10px;
  justify-content: center;
}

.static {
  height: 200px;
  background-color: lightgreen;
  margin: 5px;
}

.scrollable {
  margin: 5px;
  background-color: orange;
  overflow-y: auto;
}

I want to accomplish it by using only CSS/SCSS.

Upvotes: 1

Views: 27

Answers (1)

Pine Code
Pine Code

Reputation: 2787

Try this:

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

Upvotes: 1

Related Questions