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