Css 如何在角度应用程序中使用Flexbox获得滚动溢出的中间部分

我有一个Angular应用程序，在看了100多个flex示例后，我无法获得我想要滚动的部分。这是一个角度应用程序，但这更像是Flexbox上的一个问题

我已经尽可能地复制了我所拥有的，它也有同样的问题

所以，我想要的是一个向导式的应用程序，在这个应用程序中，按钮总是在底部，我交换不同的组件

这是在

app.component.html

中设置的

    <div id="outer-container">    
        <div id="router-outlet-parent">
             <router-outlet></router-outlet>
        </div>  
        <app-buttons></app-buttons>
    </div>

如果我将上述设置为溢出：隐藏；然后它不再滚动，但我就是无法让粉色部分滚动，即

#主要滚动内容部分

，如

page1.component.css

---

如何使用此设置进行此操作？

将此css规则添加到page1组件中的表单中

form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

---

谢谢你！这似乎正是我想要的。试着去理解为什么会这样。。。我的理解是，它需要

表单100%

，这样它就不会超出父容器的边界（我不知道为什么任何元素都会这样做，但他们只是这样做）-但不确定为什么它也需要flex-但它确实需要flex，否则它就不起作用（我认为我得到的所有布局/flex都让我失望）。不管怎样，谢谢。Elemet的高度是defoult的

auto

，所以它能满足自己的需求。所以我们将表单绑定到它的父项。然后使表单具有列方向的flex垂直布局其子项，并使

。主要滚动内容
成为flex项，以填充所有可用空间。如果没有flex，我们将计算
的高度。主要滚动内容
如
计算（100%-20px）
其中20px是页眉高度。但我们必须有固定的高度。使用flexbox，您知道，它变得更加灵活：）
form {
  display: flex;
  flex-direction: column;
  height: 100%;
}