为什么柔性基础需要一套高度？ [重复]

Question

这个问题已经在这里有一个答案：

• Grid with viewport height and inner scrolling div 2个回答

我有一个聊天系统有一个非常简单的头体尺布局，除了身体需要可滚动。我一直在试图想出一个非哈克（固定高度，每个视口）的解决方案，这是最终的结果，意外发生了完全：

  flex-basis: auto;
  overflow-y: scroll;
  height: 1px;

它完美的作品在所有决议，身体需要尽可能多的空间，因为它可以和预期它的其余部分滚动。问题是，我真的不明白这个解决方案，不应该flex-basis: auto足以这种计算发生？为什么我必须设置一个高度？

我因为如果高度比空间提供高价值，高优先弯曲高度设置为1像素。

Answer 1

[柔性基础]定义中的剩余空间被分发之前的元素的默认大小。它可以是一个长度（例如20％，5rem等）或关键字。自动关键字的意思是“看我的宽度或高度财产”（这是暂时的主要尺寸关键字做，直到不建议使用）。内容关键字的意思是“它根据项目的内容大小” - 此关键字不能很好地支持呢，所以很难进行测试，并更难知道它的兄弟最大的内容，分内容，并配合内容做。

因为它设置为自动时，它正在寻找的宽度或高度属性，它是未设置，否则它是可能的。

关于Flexbox的更多信息，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/

如果您想集装箱增长到没有定义一组高度/宽度分配的空间，你可以随时使用flex-grow。

[柔性成长]定义为如果需要柔性项生长的能力。它接受充当比例无单位值。它决定了柔性容器的项目要占用内的可用空间的多少量。

如果所有的项目具有柔性，渐进扩展设置为1，在容器中的剩余空间将被平均分配给所有的孩子。如果一个孩子有一个值2，剩余的空间会占用两倍的空间为他人（或它会尝试，至少）。