无法正确设置子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在上面工作，并且有一个scrollbar，但是红色div的高度小于绿色div的高度，认为有人希望红色div的高度与绿色div的高度相同，然后又有一个垂直滚动条。在这样的设置下如何实现？

注意： 红色maxHeight: 100%上的div无效，因为红色和绿色div的高度都增加了。

问题似乎已解决：上述注释中存在一个问题，实际上maxHeight:100%确实适用于红色div：http://codesandbox.io/s/inspiring-lederberg-ni52j，不适用于我的项目，因为此示例中top div的父级具有flex:1（在此处未显示该父级）。

Answer 1

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

这里是updated style。