Flex 1:高度不固定于剩余空间

Question

我有一个"它的高度固定为64px和"boxcontent"我想让它的高度固定在剩余的空间

我的问题是:如果"boxContent"超出了剩余空间的高度，它也会增加"boxContent"的高度。我不想要那个，我想要的是&;boxcontent &;的子元素尊重最大尺寸(并添加滚动条)

编辑:孩子们在"boxContent"是React组件，我有一个"Sider"蚂蚁设计包含多个面板的崩溃和我有一个内容并排。我想在边栏和内容栏上添加滚动条这样边栏和内容栏都有溢出-y: auto

你能帮我吗?

这里的代码

<div id="container">
<div id="boxHeader">
<HeaderArea />
</div>
<div id="boxContent">
{...}
</div>
</div>

#container {
display: flex;
flex-flow: column;
height: 100% !important;
min-height: 100% !important;

#boxContent {
/* height: calc(100vh - 64px); this works, but i don't want to calcule the size*/
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background: white;
}

#boxHeader {
flex: 0 0 64px;
}

body{
height: 100vh; /*100% is also tested*/
}

Answer 1

可以设置#boxContentmax-heightandoverflow-y: scroll有了这两个人，我想这是可行的。但如果不是，你可以添加你的HTML，这样我就可以看和修复它。我希望这行代码能解决你的问题。

#boxContent {
max-height:300px; //(for example)
overflow-y: auto;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
background: white;
}