CSS overflow-y для глубоко вложенных элементов div

Question

Я пытаюсь понять, почему мои два самых глубоких дива не прокручиваются в направлении y.

Это макет с двумя столбцами, вложенный в другой макет с двумя столбцами, по сути похожий на три столбца.Я также сделал Codepen , чтобы продемонстрировать мою точную архитектуру:

Мое текущее решение применяет overflow-y: scroll к двум div, которые я хочу прокрутить, и все родительские div были применены с max-height: 100%; overflow: hidden.

Почему это не работает?Какой лучший подход я должен использовать?

html body {
  margin: 0;
}
#app {
  padding-top: 60px;
  width: 100vw;
  height: 100vh;
  background: black;
  height: calc(100vh - 60px);
}
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 9999;
  background: cyan;
}
.route-container {
  display: grid;
  grid-template-columns: 0.2fr 0.8fr;
  grid-template-rows: auto;
  grid-template-areas:
    "sidemenu container";
  
  max-height: 100%;
  overflow: hidden;
  
  background: magenta;
}
.outer-side-menu {
  background: orange;
  grid-area: sidemenu;
}
.outer-container {
  grid-area: container;
  background: yellow;
  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto;
  grid-template-areas: 
    "tab-menu"
    "tab-container";
  
  overflow: hidden;
  max-height: 100%;
}
.tab-menu {
  grid-area: tab-menu;
  background: red;
}
.tab-container {
  grid-area: tab-container;
  background: purple;
  
  max-height: 100%;
  overflow: hidden;
}
.content-container {
  display: grid;
  grid-template-columns: 0.35fr 0.65fr;
  grid-template-rows: auto;
  grid-template-areas: "inner-menu inner-content";
  
  max-height: 100%;
  overflow: hidden;
  
  font-size: 144px;
  background: teal;
}
.inner-menu {
  grid-area: inner-menu;
  overflow-y: scroll;
  background: pink;

}
.inner-content {
  grid-area: inner-content;
  overflow-y: scroll;
  background: teal;
}

<div id="app">
  <div id="navbar">Navigation</div>
  <div class="route-container">
    <div class="outer-side-menu">Side Menu</div>
    <div class="outer-container">
      <div class="tab-menu">
        Tabs
      </div>
      <div class="tab-container">
        <div class="content-container">
          <div class="inner-menu">
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
          </div>
          <div class="inner-content">
            Inner Content 
            Inner Content 
            Inner Content 
            Inner Content
            Inner Content
            Inner Content
            Inner Content
            Inner Content
            Inner Content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Ваши самые глубокие два div не прокручивают, потому что они фактически не переполняются.Если вы укажете высоту этих двух элементов (и высоту родительских элементов), вы увидите, что они имеют высоту почти 3000 пикселей и достаточно места для всего вашего текста.

Dev Инструменты, показывающие высоту одного из элементов div

Они кажутся сжатыми до небольшого размера, поскольку переполнение .route-container скрыто.См .:

.route-container {
    display: grid;
    grid-template-columns: 0.2fr 0.8fr;
    grid-template-rows: auto;
    grid-template-areas: "sidemenu container";
    max-height: 100%;
    overflow: hidden;
    background: magenta;
}

Чтобы решить эту проблему, я бы использовал display: flex; вместо display: grid;.Результат позволил этим двум полям прокручиваться по отдельности.

html body {
    margin: 0;
}

#app {
    width: 100vw;
    height: 100vh;
    background: black;
    display: flex;
    flex-direction: column;
}

#navbar {
    width: 100vw;
    height: 20vh;
    background: cyan;
}

.route-container {
    display: flex;
    flex-direction: row;
    background: magenta;
    height: 85vh;
}

.outer-side-menu {
    background: orange;
    width: 100%;
}

.outer-container {
    background: yellow;
    display: flex;
    flex-direction: column;
}

.tab-menu {
    background: red;
}

.tab-container {
    background: purple;
}

.content-container {
    display: flex;
    flex-direction: row;
    max-height: 75vh;
    overflow: hidden;
    font-size: 144px;
    background: teal;
}

.inner-menu {
    overflow-y: scroll;
    background: pink;
}

.inner-content {
    overflow-y: scroll;
    background: teal;
}

Сетка, вероятно, слишком ограничительна, чтобы позволить внутренним элементам прокручиваться без одновременной прокрутки «Вкладок» и «Бокового меню».

Answer 2

Хорошо, я понял это.Проблема была в моем понимании height.Дочерние элементы не принимали всю высоту, в которой они содержались. Мне нужно было использовать position вместе с top, left, bottom, right.

См. Следующее codepen

Answer 3

Добавлен height: calc(100vh - 109px); к внутреннему меню и внутреннему содержимому div

 Total height of window - (height of Tab bar + Navigation bar) 

html body {
  margin: 0;
}
#app {
  padding-top: 60px;
  width: 100vw;
  height: 100vh;
  background: black;
  height: calc(100vh - 60px);
}
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 9999;
  background: cyan;
}
.route-container {
  display: grid;
  grid-template-columns: 0.2fr 0.8fr;
  grid-template-rows: auto;
  grid-template-areas:
    "sidemenu container";
  
  max-height: 100%;
  overflow: hidden;
  
  background: magenta;
}
.outer-side-menu {
  background: orange;
  grid-area: sidemenu;
}
.outer-container {
  grid-area: container;
  background: yellow;
  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px auto;
  grid-template-areas: 
    "tab-menu"
    "tab-container";
  
  overflow: hidden;
  max-height: 100%;
}
.tab-menu {
  grid-area: tab-menu;
  background: red;
}
.tab-container {
  grid-area: tab-container;
  background: purple;
  
  max-height: 100%;
  overflow: hidden;
}
.content-container {
  display: grid;
  grid-template-columns: 0.35fr 0.65fr;
  grid-template-rows: auto;
  grid-template-areas: "inner-menu inner-content";
  
  max-height: 100%;
  overflow: hidden;
  
  font-size: 144px;
  background: teal;
}
.inner-menu {
  grid-area: inner-menu;
  overflow-y: scroll;
  background: pink;
  height: calc(100vh - 109px); // Total height of window - height of top elements

}
.inner-content {
  grid-area: inner-content;
  overflow-y: scroll;
  background: teal;
  height: calc(100vh - 109px);
}

<div id="app">
  <div id="navbar">Navigation</div>
  <div class="route-container">
    <div class="outer-side-menu">Side Menu</div>
    <div class="outer-container">
      <div class="tab-menu">
        Tabs
      </div>
      <div class="tab-container">
        <div class="content-container">
          <div class="inner-menu">
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
            Inner Menu
          </div>
          <div class="inner-content">
            Inner Content 
            Inner Content 
            Inner Content 
            Inner Content
            Inner Content
            Inner Content
            Inner Content
            Inner Content
            Inner Content
          </div>
        </div>
      </div>
    </div>
  </div>
</div>