Compelex Flex Box Layout

Question

Я пытаюсь создать полноэкранный интерфейс приложения.В области должна быть область прокрутки с именем view-with-wisdebar.Область «содержимого» также должна прокручиваться, чтобы «параметры» оставались неизменными.

Я аппроксимирую гибкую высоту, используя единицы просмотра для одного из потомков гибкого блока.Заголовок должен быть статичным.Основной должен иметь гибкую высоту с областью прокрутки внутри.Нижний колонтитул должен быть статическим.

Проблема в том, что содержимое никогда не соответствует высоте области просмотра.Элемент 'overflow auto' не используется.Я думал, что достиг этого, но затем я добавил еще немного высоты верхнего колонтитула, и нижний колонтитул опустился снизу!

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

https://jsfiddle.net/p47o5yfe/6/

- правка: вторая ссылка, показывающая желаемый эффект приблизительно

https://jsfiddle.net/p47o5yfe/8/

- редактировать: я еще больше упростил задачу

https://jsfiddle.net/p47o5yfe/10/

.wrapper {
  display: flex;
  flex-direction: column;
}

.header {
  flex-grow: 0;
  flex-shrink: 0;
}

main {}

.view-controller {}

.navbar {}

.view-with-sidebar {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto;
  height: calc(100vh - 300px);
}

.sidebar {
  width: 100px;
}

.view {
  width: 100%;
}

.options {
  float: left;
  margin-right: 10px;
}

.content {
  overflow-x: auto;
}

footer {
  flex-grow: 0;
  flex-shrink: 0;
}

<div class="wrapper">
  <header class="header">
    Header
  </header>
  <main>
    <div class="view-controller">
      <div class="navbar">
        Navbar
        <div class="view-with-sidebar">
          <div class="sidebar">
            Sidebar
          </div>
          <div class="view">
            <div class="options">
              Options
            </div>
            <div class="content">
              Content
            </div>
          </div>
        </div>
      </div>
  </main>
  <footer>
    Footer
  </footer>
  </div>

Answer 1

Если вы хотите разместить полосу прокрутки только для содержимого и опции div (без какого-либо хардкора), вы можете сделать что-то подобное.Я не изменил ваш HTML, я работал только с CSS.Все они прокомментированы для более простого понимания.Надеюсь, это поможет вам.

* {
	/* it is better if you use a normalize css (https://necolas.github.io/normalize.css/) instead of these rules that I added only for this example */
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	/* end */
}

.wrapper,
.wrapper * {
	margin: 2px;
	padding: 2px;
	background-color: rgba(50, 50, 50, 0.5) !important;
	border: 1px solid black;
}

.wrapper {
	display: flex;
	flex-direction: column;
	margin: 0; /* add this to remove the default scrollbar, you can remove this rule if it is not a problem for you */
	height: 100vh;
}

.header {
	flex-grow: 0;
	flex-shrink: 0;
}

main {
	flex: 1 1 auto;
	overflow-y: hidden; /* add this rule to use the last level overflow-y in content & options */
}

footer {
	flex-grow: 0;
	flex-shrink: 0;
}

.view-controller {
	display: flex; /* it is a flexbox in a flexbox in a flexbox... */
	flex-direction: column;
}

.view-with-sidebar {
	flex: 1 1 auto;
	display: flex;
	overflow-y: hidden; /* add this rule to use the last level overflow-y in content & options */
}

.sidebar {
	width: 100px;
}

.view {
	display: flex; /* another flexbox in a flexbox... the game continues... */
	flex: 1 1 auto;
}

.options {
	margin-right: 10px;
	min-width: 100px; /* this is an add only to read better the options content, you can remove it */
	overflow-y: auto; /* this is the real overflow with scroll bar */
}

.content {
	overflow-y: auto; /* this is the real overflow with scroll bar */
	flex: 1 1 auto;
}

<div class="wrapper">
      <header>
        Header<br>
        Header
      </header>
      <main class="view-controller">
           <div class="navbar">
                Navbar<br>
                Navbar
           </div>
          <div class="view-with-sidebar">
           <div class="sidebar">
              Sidebar<br>
              Sidebar
            </div>
            <div class="view">
              <div class="options">
                Options<br>
                Options<br>
                Options<br>
                Options<br>
                Options<br>
                Options<br>
                Options<br>
                Options<br>
                Options<br>
                Options<br>
                Options<br>
                Options<br>
               </div>
              <div class="content">
                Content<br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br> Content
                <br>
              </div>
            </div>
          </div>
      </main>
      <footer>
        Footer<br>
        Footer</footer>
    </div>