我有一个带有非常简单的页眉-正文-页脚布局的聊天系统，除了正文需要可滚动。我一直在尝试提出一个非 hacky（每个视口的固定高度）的解决方案，这是最终结果，这完全是偶然发生的：
flex-basis: auto;
overflow-y: scroll;
height: 1px;
它在所有分辨率下都能完美运行，主体占用尽可能多的空间，其余部分按预期滚动。问题是我不太了解这个解决方案，flex-basis: auto 不应该足以让这个计算发生吗？为什么我必须设置高度？
我将其设置为 1px，因为如果 height 的值高于可用空间，则 height 优先于 flex height。
【问题讨论】：
[flex-basis] 定义元素在剩余空间分配之前的默认大小。它可以是长度（例如 20%、5rem 等）或关键字。 auto 关键字的意思是“查看我的宽度或高度属性”（在弃用之前由 main-size 关键字临时完成）。 content 关键字的意思是“根据项目的内容调整大小”——这个关键字还没有得到很好的支持，所以很难测试，也很难知道它的兄弟 max-content、min-content 和 fit-content 是做什么的。
可能是因为设置为自动时，它正在寻找宽度或高度属性，否则未设置。
有关 flexbox 的更多信息，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/
如果您希望容器增长到分配的空间而不定义设置的高度/宽度，您可以随时使用flex-grow。
[flex-grow] 定义了弹性项目在必要时增长的能力。它接受用作比例的无单位值。它规定了项目应占用的弹性容器内的可用空间量。
如果所有项目都将 flex-grow 设置为 1，则 容器将平均分配给所有孩子。如果其中之一 children 的值为 2，剩余空间将占用两倍 和其他人一样多的空间（或者它会尝试，至少）。
【讨论】：