html - 无法正确设置子 div 的最大高度

Question

我有以下布局:

代码如下:

<div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
  <div style={{ height: 300 }}>test</div>
  <div style={{ flex: 1, display: "flex", border: "1px solid green" }} >
    <div style={{ flex: 1, maxHeight: 350, overflow: "auto", border: "3px solid red" }}>
      <ResultsTable />
    </div>
    <div style={{ flex: 1, }}></div>
  </div>
</div >

你可以看到上面的设置maxHeight: 350有效并且有一个滚动条，但是红色div的高度小于高度绿色 div 的高度，理想情况下我认为人们希望红色 div 的高度与绿色 div 的高度相同，然后也有一个垂直滚动条。我怎样才能在这样的设置中实现这一点？

注意: 在红色 div 上设置 maxHeight: 100% 无效，因为红色和绿色 div 刚刚增加了高度。

问题似乎已解决:上面的注释中存在问题，实际上 maxHeight:100%，似乎对红色 div 有效:http://codesandbox.io/s/inspiring-lederberg-ni52j ，它在我的元素中不起作用，因为此示例中顶级 div 的父级具有 flex:1(此处未看到该父级)。

Answer 1

尝试在红色 div 中使用 height: "auto" 和 maxHeight: "100%"。

这是 updated style .