полоса прокрутки во внутреннем div, в то время как родительский имеет только максимальную высоту

Question

Я не могу заставить работать простую конструкцию css, и это сильно расстраивает меня.

У меня есть абсолютный div, расположенный где-то на моей странице с фиксированной позицией. Он имеет максимальную высоту, которая является вычислением высоты контейнеров минус некоторый запас, который я хочу получить снизу, например:

#container {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  max-height: 300px;
}

Это прекрасно работает.

Тогда оно имеет два детских дива. Первый изменяет высоту, но не должен прокручиваться. Второй также изменяет высоту (изменяет содержимое) и должен прокручиваться только тогда, когда контейнер больше не может расти.

#inner {
  overflow: auto;
  /* and prolly some other stuff... */
}

Я сделал скрипку с описанной проблемой .. https://jsfiddle.net/qy3dvh7n/

Кто-нибудь видел, что я скучаю?

Answer 1

Вы можете изменить #inner на max-height, а также установить height на 280px, чтобы у вас было 10px padding сверху и снизу

#inner {
  background-color: red;
  overflow: auto;
  max-height: 280px;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

#container {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 300px;
  background-color: blue;
  padding: 10px;
}

#container2 {
  position: absolute;
  top: 350px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 300px;
  background-color: blue;
  padding: 10px;
}

#header {
  /* this header has a flexible height */
  background-color: green;
}

#inner {
  background-color: red;
  overflow: auto;
  max-height: 280px;
  height: 100%;
}

<div id="container">
    <div id=header>here some text to give it height</div>
    <div id="inner">
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; here there should be a scrollbar   ---> <br />
      here lots of text<br />
      here lots of text<br />
      that overflows the this div<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
    </div>
</div>






<div id="container2">
    <div id=header>here some text to give it height</div>
    <div id="inner">
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
      here lots of text<br />
    </div>
</div>

Answer 2

Я думаю, вы должны добавить max-height свойство к вашему #inner div. И затем появляется свиток, имеющий максимальную высоту деления.

https://jsfiddle.net/5zfomxne/4/