Html Can'；t正确设置子div的最大高度

我的布局如下：

代码如下：

<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

的高度相同，然后还有一个垂直滚动条。如何在这种设置中实现这一点

注意：在红色的

div

上有

maxHeight:100%

，不起作用，因为红色和绿色的

div

都只是增加了高度

问题似乎得到了解决：上面的注释中有一个问题，实际上

maxHeight:100%

，它似乎对红色div:有效，但在我的项目中不起作用，因为此示例中top div的父级具有

flex:1

（此处未看到该父级）。

尝试使用

height:“auto”

和

maxHeight：“100%”

在红色分区中

以下是.

尝试使用红色分区中的

height:“auto”

和

maxHeight:“100%”

---

以下是示例。

您能提供一个可替换的示例吗？如果不使用呈现的代码，很难猜测哪些其他属性可能存在冲突。i、 你可以在你的红边上留一个空白，我们永远也不会知道。@AlexanderDeSousa你是说演示吗？澄清一下，你是想让红框变大以适应绿框，还是想让绿框向下折叠以适应红框？你的便笺中的

maxHeight:100%

将完全按照你的要求工作，我看不到它会增加绿格的高度。完美，这就是为什么使用代码很重要的原因。您能提供一个可替换的示例吗？如果不使用呈现的代码，很难猜测哪些其他属性可能存在冲突。i、 你可以在你的红边上留一个空白，我们永远也不会知道。@AlexanderDeSousa你是说演示吗？为了澄清，你是想让红框变大以适应绿框，还是想让绿框向下折叠以适应红框？你的便笺中的

maxHeight:100%

将完全按照你的要求工作，我看不到它会增加绿格的高度。完美，这就是为什么代码很重要。