当所有其他容器都尽可能小时，如何让容器缩小？

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 可用。页脚占用20px， 内容需要另外 50px 并且标题需要 20px 作为 好吧。 在这种情况下，容器应该增长 10 像素，以便覆盖整个 100 像素。

2. UC2：整个容器有 100px 可用。页脚需要 20px，内容需要 40px，页眉需要 60px。在这种情况下，整个容器需要 120 像素。由于标题可以缩小 20 像素（最小尺寸），因此内容应保持在 40 像素。

3. UC3：整个容器有 100px 可用。页脚需要 20px，内容需要 70px，页眉需要 50px。所以容器需要140px。 在这种情况下，标题应该缩小到 40 像素，容器也应该缩小到 40 像素，以保持整个容器的 100 像素。

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>