Flex растут 1 не позволяет правильную прокрутку

Question

Я столкнулся, как мне кажется, с крошечной проблемой с flex.Я пытаюсь получить простой макет (как показано в связанном jsfiddle).Однако, когда div справа (красного цвета) переполняется по высоте, элемент переполняется в области просмотра и прокручивается только при переполнении высоты области просмотра.

JSfiddle

Я почти уверен, что это потому, что я использую height: 100%; во многих элементах, но мне нужно, чтобы они были максимально большими (чтобы полностью заполнить высоту области просмотра).

Я хочу, чтобы область просмотра была полностью заполнена этими тремя разделами: навигация, левая боковая панель и правый контент (см. Следующее изображение).Где правый раздел контента должен быть прокручиваемым, когда он переполняет область просмотра.

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

Что не так и что я хочу, в основном описано на следующем рисунке.

Как мне этого добиться?Спасибо за ваше время.

Код (также доступен в JSFiddle )

HTML

  <div id="content-container">
    <div id="content">
      <div id="left">
        IM LEFT
      </div>
      <div id="right">
        <div id="inner">
          IM RIGHT
        </div>
        IM RIGHT
      </div>
    </div>
  </div>
</div>

CSS

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#main {
  height: 100%;
  background: black;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100vw;
  height: 100vh;
}

#main nav {
  background: orange;

  width: 100%;
  height: 96px;
}

#main #content-container {
  background: darkgreen;
  color: white;
  width: 100%;
  flex-grow: 1;
  max-height: 100%;
}

#main #content-container #content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  max-height: 100%;
}

#main #content-container #content #left {
  background: darkblue;
  width: 30%;
  height: 100%;
}

#main #content-container #content #right {
  background: darkred;
  height: 100%;
  flex-grow: 1;
  overflow-y: scroll;
}

#main #content-container #content #right #inner {
  font-size: 25rem;
}

Answer 1

Вы можете упростить свой код, как показано ниже:

body {
  margin: 0;
}

#main {
  height: 100vh; /*full height*/
  background: black;
  display: flex;
  flex-direction: column;
}

#main nav {
  background: orange;
  height: 96px; /*fixed height*/
}

#content-container {
  background: darkgreen;
  color: white;
  flex-grow: 1; /*fill the remaining height*/
  min-height:0;  /*enable the shrink*/
}

#content {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#left {
  background: darkblue;
  width: 30%;
}

#right {
  background: darkred;
  overflow:auto;
}


/*Irrelevant*/
#inner {
  font-size: 25rem;
}

<div id="main">

  <nav>
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/games">Games</a>
      </li>
      <li>
        <a href="/create">Create</a>
      </li>
    </ul>
  </nav>

  <div id="content-container">
    <div id="content">
      <div id="left">
        IM LEFT
      </div>
      <div id="right">
        <div id="inner">
          IM RIGHT
        </div>
        IM RIGHT
      </div>
    </div>
  </div>

</div>

Answer 2

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#main {
  height: 100%;
  background: black;
  display: flex;
  flex-wrap: wrap;
}

#main nav {
  background: orange;
  width: 100%;
  height: 96px;
}

#main #content-container {
  background: darkgreen;
  color: white;
  width: 100%;
  height: calc(100% - 96px);
  max-height: calc(100% - 96px);
}

#main #content-container #content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  max-height: 100%;
}

#main #content-container #content #left {
  background: darkblue;
  width: 30%;
  height: 100%;
}

#main #content-container #content #right {
  background: darkred;
  height: 100%;
  width: 70%;
  overflow-y: auto;
  overflow-x: hidden;
  word-break: break-all;
}

#main #content-container #content #right {
  font-size: 27em;
}

<div id="main">

  <nav>
    <ul>
      <li>
        <a href="/">Home</a>
      </li>
      <li>
        <a href="/games">Games</a>
      </li>
      <li>
        <a href="/create">Create</a>
      </li>
    </ul>
  </nav>

  <div id="content-container">
    <div id="content">
      <div id="left">
        IM LEFT
      </div>
      <div id="right">
        IM RIGHT
      </div>
    </div>
  </div>

</div>

Answer 3

#main #content-container #content #right {
  overflow-y: auto;
}

Answer 4

Одним из решений может быть принятие во внимание высоты элемента nav при определении высоты вашего #content с использованием calc(100% - 96px), 96px - высота вашего элемента nav:

#main #content-container #content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  height: calc(100% - 96px);
  max-height: calc(100% - 96px);
}