Как сделать так, чтобы многоуровневая высота растягивалась в браузере?

Question

Мне нужно контролировать макет высоты, близкий к поведению рабочего стола:

1. Я установил высоту верхнего уровня элемента dom.
2. Глубоко внутри него содержимое автоматически масштабируется для новой высоты.

Для одного уровня иерархии это легко реализовать с помощью flex. Но мне нужен такой макет:

<top height="...rem">
  <header height="...rem"/>
  <main> // stretched height
    <main2> // stretched height
      <content>
        limited height by main2 and add scroll if necessary
      </content>
    </main2>
    <footer height="...rem"/>
  </main>
</top>

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

https://jsfiddle.net/2Lfgq93h/6/

Итак, вопросы:

1. Возможно ли реализовать это проще?
2. Каковы подводные камни доказательства концепции?

Answer 1

Таким образом, одна проблема заключается в том, что нет необходимости в элементе <main2> или классе .submain, как вы назвали его в скрипке.

Главное, на что нужно обратить внимание, это то, чтоВы хотите, чтобы некоторые из элементов flex (я специально говорю о потомках родителя с display: flex) имели фиксированный размер (например, верхний и нижний колонтитулы), а некоторые - переменный размер.Для этого вы можете использовать комбинацию flex: none и flex: 1 1

* {
  box-sizing: border-box;
}

.height-limit {
  height: 10rem;
  display: flex;
  flex-direction: column;
}

header {
  flex: none;
  padding: 1rem;
  background: #bdc3c7;
}

.main {
  flex: 1 1;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  background: #e74c3c;
}

.content {
  flex: 1 1;
  overflow: auto;
  background: #3498db;
}

footer {
  flex: none;
  padding: 1rem;
  background: #2ecc71;
}

<div class="height-limit">
  <header>header</header>
  <div class="main">
    <div class="content">
      some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body some body  
    </div>
    <footer>footer</footer>
  </div>
</div>