Как сделать элемент прокручиваемым?

Question

Я хочу сделать полосу прокрутки в элементе div.

Поэтому я пытаюсь сделать это так:

#roomlist {
  width: 250px;
  /* max-height: 100%; */
  /* overflow-y: hidden; */
  overflow: scroll;
  max-width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  margin-left: -210px;
  background-color: #91c7e1;
  transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.8);
  z-index: 1;
  margin-top: 70px;
}

<div id="roomlist">
  <div id='ex1'>
    <ul id="roomlistul"></ul>
  </div>

И да, вы видите стрелки вверх и вниз. Но вы не видите фактический луч, чтобы вы могли прокрутить. Посмотрите на изображение, что я имею в виду не вижу полосу прокрутки

Answer 1

создать css

.scroll-box {
    overflow-y: auto;
    height: 400px;
}

использование

<div class="scroll-box">
    <div>content height more than 400px</div>
</div>

как только высота содержимого превысит 400 пикселей, в этом примере появится полоса прокрутки.

Answer 2

Лучший способ - использовать автоматически масштабируемые flex-контейнеры;

демонстрационный макет:

<div class="parent-container">
  <div class="scrollable-content">
    <p>I am Groot</p>
  </div>
</div>

демонстрационные стили:

.parent-container {
  display: flex;
  flex-direction: column;
  // we want to put fixed height here, 
  // so scrollable-content scaled properly
  height: 200px; 
}

.scrollable-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

в вашем случае это будет:

#roomlist {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  max-width: 300px;
  // fixed height value
  height: 100vh;
  display: flex;
  flex-direction: column;
  margin-left: -210px;
  background-color: #91c7e1;
  transition: all 0.5s cubic-bezier(0.7, 0, 0, 0.8);
  z-index: 1;
  margin-top: 70px;
}

#ex1 {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}