Как позволить контейнеру сжиматься, когда все остальные контейнеры настолько малы, насколько это возможно?

Question

Моя проблема в том, что «контент» всегда получает полосу прокрутки, когда требуется «сжатие», так как его размер также уменьшается.Но он должен быть «сжатым», так как его содержимое может быть больше доступного пространства.

Как мне этого добиться?Или это просто невозможно?

#container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#header {
  background-color: red;
  flex-grow: 0;
  flex-shrink: 100;
  overflow: auto;
  min-height: 40px;
}

#content {
  background-color: yellow;
  flex-grow: 1;
  flex-shrink: 1;
  overflow: auto;
  min-height: 100px;
}

#footer {
  background-color: green;
  color: white;
  flex-grow: 0;
  flex-shrink: 0;
}

<div id="container">
  <div id="header">
    take as much space as content allows to take. shrink if there is not enough space.
  </div>
  <div id="content">
    take all the available space between header and footer, shrink in case there is not enough space but only when header is as small as possible. do not shrink as the header still can be shrunken to prevent scrollbars as long they are not needed...
  </div>
  <div id="footer">
    take as much space as your content needs
  </div>
 </div>

Еще одна попытка объяснить это:

Нижний колонтитул должен занимать столько места, сколько необходимо его содержимому.Чем оно не должно расти и не уменьшаться.Заголовок должен занимать столько места, сколько контенту не нужно.Если места недостаточно, жатка должна сжиматься до фиксированной минимальной высоты.Содержимое должно занимать как можно больше места между верхним и нижним колонтитулом.Если места недостаточно, он должен также сжиматься, но только когда заголовок достиг минимальной высоты.

И еще одна попытка с некоторыми числами:

1. UC1:весь контейнер имеет 100px в наличии.Нижний колонтитул занимает 20 пикселей, для содержимого требуется еще 50 пикселей, а заголовок также занимает 20 пикселей.В этом случае контейнер должен увеличиться на 10px, чтобы охватить все 100px.

2. UC2: весь контейнер имеет доступное 100px.Нижний колонтитул занимает 20px, содержание требует 40px и заголовок 60px.В этом случае весь контейнер будет нуждаться в 120px.Поскольку заголовок может уменьшаться на 20 пикселей (до минимального размера), содержимое должно оставаться на уровне 40 пикселей.

3. UC3: для всего контейнера доступно 100 пикселей.Нижний колонтитул занимает 20px, содержание требует 70px и заголовок 50px.Таким образом, контейнеру понадобится 140 пикселей.В этом случае заголовок должен уменьшиться до 40px, а контейнер до 40px, а также остаться на 100px для всего контейнера.

Answer 1

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

body {
 margin:0;
}

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

#header {
  background-color: red;
  height: 40px; /*fixed height*/
  flex-shrink:10; /* Shrink more that the other*/
}

#content {
  background-color: yellow;
  flex-grow: 1; /*Fill remaining space*/
  overflow: auto; /*allow the scroll to appear if not enough space*/
  min-height: 100px;
}
#footer {
  background-color: green;
  color: white;
}

<div id="container">
  <div id="header">
    take as much space as content allows to take. shrink if there is not enough space.
  </div>
  <div id="content">
    take all the available space between header and footer, shrink in case there is not enough space but only when header is as small as possible. do not shrink as the header still can be shrinked to prevent scrollbars as long they are not needed...
  </div>
  <div id="footer">
    take as much space as your content needs
  </div>
 </div>