最大高度弯曲

Question

如何使用 flex 将左列（块）的高度设置为 100%？我有这样的 dom：

<LeftPanel>
  <Logo />
  <Profile />
  <Chat />
  <SocialButtons />
</LeftPanel>

LeftPanel 高度为 100%。 Chat 应该按可用空间增长或缩小，但事实并非如此。我应该如何使用 css(scss) flex 呢？

Answer 1

我不知道我是否得到了你想要做的，但如果你想让<LeftPanel> 成为屏幕的 100% 并且<Chat> 是垂直扩展的，你应该使用以下属性设置它的 CSS：

.LeftPanel {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

<Logo>,<Profile> 和 <SocialButtons> 应该有一个定义的 height。比如下面的例子：

.Logo {
    height: 60px;
    width: 100%;
}

.Profile {
    height: 160px;
    width: 100%;
}

.SocialButtons {
    height: 50px;
    width: 100%;
}`

那么，这里有两个可能的技巧：

.Chat {
    flex-grow: 1;
}`

使用flex-grow，您可以将弹性项目的扩展系数设置为高于其他项目，请阅读文档here。

.Chat {
    height: 100vh;
}`

如果.Chat 的父级不使用flex-wrap 包装其内容，则.Chat 将占用父级空间的剩余空间。