Flex 1：高度不固定到剩余空间答案

【问题标题】：Flex 1 : height is not fixed to remaining spaceFlex 1：高度不固定到剩余空间
【发布时间】：2021-03-13 02:15:49
【问题描述】：

我有一个高度固定为 64 像素的“boxHeader”和一个我希望将高度固定为剩余空间的“boxcontent”。

我的问题：如果“boxContent”中的孩子的高度超过了剩余空间的高度，它也会增加“boxContent”的高度。而且我不希望这样，我希望“boxContent”的孩子尊重最大尺寸（并添加滚动）

编辑：“boxContent”中的子项是 React 组件，我有一个 Ant Design 的“Sider”，其中包含多个 Panel 的 Collapse，并且我有一个并排的 Content。我想在 Sider 和 Content 上添加一个滚动条，这样 Sider 和 Content 都有 overflow-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*/
}

【问题讨论】：

overflow: scroll
我已经有一个overflow-y: auto on the children
你在说什么孩子？请以 proper minimal reproducible example 的形式提出此类问题，而不仅仅是几个可能缺少上下文的 sn-ps。
应该在 boxcontent 上设置溢出自动，而不是在孩子上
我已经编辑过了，问题是我不能在 boxContent 上设置溢出，因为我想在 boxContent 的两个孩子上都有一个滚动条

标签： html css flexbox

【解决方案1】：

你可以给#boxContent max-height 和 overflow-y: scroll 这两个我认为它会起作用。但如果不是，您可以添加您的 HTML 以便我查看和修复它。我希望这行代码能解决你的问题。

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

【讨论】：