html - 以最大高度 flex

Question

如何使用 flex 将左列( block )的高度设置为 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您可以设置 flex 元素相对于其他元素的膨胀系数，阅读文档 here .

.Chat {
    height: 100vh;
}`

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