Как сделать div изменить размер и прокручивать между братьями и сестрами div

Question

В основном у меня есть Angular навигация по сторонам материала с расширяемыми элементами навигации

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

Мне удалось реализовать поведение прокрутки с применением следующего стиля:

title-div {
    min-height: 10%;
}

items-div {

    height: 80% //To force the info-div to be positioned at the bottom
    max-height: 80%
    overflow: auto;
}

info-div {
    min-height: 10%;
}

Однако изменение размера не работает должным образом. На определенной высоте info-div (3) начинает обрезаться вместо item-div (2), уменьшаясь в размерах, чтобы инфо-div подходил. Как я могу заставить эту работу работать?

Answer 1

Вы можете легко достичь чего-то подобного, используя flexbox:

<div id="sidenav">
  <div>Title</div>
  <div class="items">
    <div>item</div>
    <div>item</div>
    <div>item</div>
  </div>
  <div>Information</div>
</div>

#sidenav{
  display: flex;
  flex-direction: column;
  height: 100%;
}
#sidenav .items{
  flex-grow: 1;
  overflow-y: auto;
}

https://codepen.io/Ploddy/pen/yLNaLyQ?editors=1100

Answer 2

когда вы установите второе погружение height на относительное место, которое оно должно занять, и используйте overflow: auto, это должно работать.

a PO C:

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  width: 100px;
  border: solid 2px;
}

.one,
.three {
  background: blue;
  border: solid 1px;
  height: 50px;
  padding: 10px;
}

.two {
  padding: 10px;
  overflow: auto;
  height: calc(100vh - 100px);
}

<div class="container">
  <div class="one">title</div>
  <div class="two">
    body<br> body
    <br> body
    <br> body
    <br> body
    <br> body
    <br> body
    <br> body
    <br> body
    <br> body
    <br> body
    <br> body
  </div>
  <div class="three">title</div>


</div>