带有弹性样式的CSS Nested Div可实现理想的滚动

Question

我有以下div：

我正在尝试使表单内容可滚动，同时保留其他所有内容。对话框高度根据表单内容而变化，并且可以增长到窗口大小。但除此之外，它应该在表单内容中添加一个滚动。

如果TAB div（Tab父级和标签内容）不存在，我尝试使用flex并使其正常工作。即使这样，即使高度可用，滚动条也会永久保留（另一个问题但不是主要的）。

有关如何在可变div上使用flex样式以获得仅在表单内容上滚动的任何建议？

当标签部分不存在时有效的CSS：

<div id="dialog" style="display: flex;">
  <div id="form" style="display: flex; flex-direction: columnl">
    <div id="formContent" style="overflow-y: auto;"></div>
    <div id="formFooter"></div>  
  <div>
</div>

上述HTML和CSS按预期工作，向表单内容添加滚动条。 但当对话框为最大高度，并且不再需要滚动条时，滚动条仍然存在。

当包含标签部分时，此方法不起作用。它通过显示2个滚动条或滚动整个对话框而不仅仅是表单内容来创建意外行为。一个用于表单内容div，另一个用于对话框div。

HTML CSS如下：

<div id="Dialog" style="height:300px;overflow-y: auto;width: 400px;">
  <div id="DialogContent">
    <div id="TabController">
      <div id="tabHeader">
      </div>
      <div id="tabContentPanel">
        <div id="tabContent">
          <div id="form">
            <div id="formContent">             
              Y U NO SCROLL ????
            </div>
            <div id="formFooter">
              This is the Footer.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>