Полоса прокрутки для родительского элемента, содержащего абсолютно позиционированный элемент

#css

#css

Вопрос:

У меня есть следующий код jsbin. Возможно ли иметь вертикальную прокрутку, когда сообщения переполняют оболочку? Спасибо!

Комментарии:

1. Обязательно ли, чтобы первое сообщение появлялось внизу?

2. Пожалуйста, немного расширьте. Просто объясните, что вы хотите сделать, немного менее кратким. Кроме того, похоже, что он ничего не делает в Chrome.

3. Я хочу, чтобы сообщения отображались внизу, и когда они переполняют контейнер, должна появиться полоса прокрутки.

Ответ №1:

замените свой css на эту демонстрацию css

 #wrapper {
  position: relative;
  height: 400px;
  border: 1px solid #AAA;
  margin-bottom: 20px;
}

#list {
  position: absolute;
  bottom: 0;
  width: 100%;
  max-height:100%;
  overflow-y: auto;
}

.message {
  background-color: orange;
  padding: 10px;  
  border-bottom: 1px solid red;
}
 

Комментарии:

1. Итак, вы только что добавили max-height . Отлично! Спасибо!