Полоса прокрутки не работает с максимальной высотой на родительском - PullRequest
1 голос
/ 04 марта 2020

У меня есть родительский контейнер со значением max-height и дочерний элемент с height: 100%; и overflow: auto;, и мне нужно, чтобы дети получили полосу прокрутки (а не контейнер) относительно высоты родительского контейнера.

Это работает, когда я пытаюсь наложить свойство height на родительский контейнер, но я не понимаю, почему оно не работает со свойством max-height.

Вот пример того, что я не хочу (но работаю) со свойством height https://jsfiddle.net/pwjs2dmc/2/

Вот пример того, что я хочу (не работаю) со свойством max-height https://jsfiddle.net/pwjs2dmc/1/

У вас есть представление о проблеме?

Спасибо

Ответы [ 2 ]

2 голосов
/ 04 марта 2020

Я играл с ним, вам нужно дать максимальный рост ребенку, чтобы переполнение действительно применимо.

Это работает для меня

.container
{
  position:relative;
  overflow:hidden;
  background:cyan;
}
.container .content
{
  max-height:100px;
  overflow:auto;
}

И вы давали ребенку 100% роста это означает, что он всегда будет занимать всю высоту и всегда игнорировать переполнение.

1 голос
/ 04 марта 2020

Заменена overflow:hidden родительская форма на overflow-y: auto и удалена дочерняя форма переполнения

.container
{
  position:relative;
  max-height:100px;
  overflow-y:scroll;
  background:cyan;
}
.container .content
{
  height: 100%;
}
<div class="container">
  <div class="content">
    lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum  lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum 
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...