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>

另一种解释：

页脚应占用其内容所需的空间。比它不应该增长和不收缩。标头应占用内容不需要的空间。如果没有足够的空间，则标头应缩小到固定的最小高度。内容应在页眉和页脚之间占据尽可能大的空间。如果没有足够的空间，它也应该缩小，但仅当标头达到其最小高度时才应缩小。

再尝试一些数字：

UC1：整个容器的可用像素为100px。页脚占20px，内容需要另外50像素，标头需要20像素好。在这种情况下，容器应增长10px，以便覆盖整个100px。
UC2：整个容器的可用像素为100px。页脚占20像素，内容占40像素，页眉占60像素。在这种情况下，整个容器将需要120px。由于标题可以缩小20像素（至其最小大小），因此内容应保持在40像素。
UC3：整个容器有100px可用。页脚占20像素，内容占70像素，页眉占50像素。因此容器将需要140px。在这种情况下，标头应缩小为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>

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

1 个答案: