css - Angular 组件中的 Flexbox 溢出滚动

Question

我正在尝试使用 Angular 2 应用构建一个两列设计。我创建了一个 plunker 来重现我的问题:https://plnkr.co/3Evxm9?p=info

我希望可滚动区域是红色的 div (.overflow)，而不是 .page。没有 .page { overflow: auto } 页面根本不会滚动，尽管我希望 .overflow 这样做，因为它定义了 的高度>100%。 padding 用于从 .top div 偏移。我最初虽然使用 margin 代替，但是在 .page 上没有 overflow: auto，margin 超出了 .container 的范围(缩小以适应 .overflow 的高度(包括填充，不包括边距)。

我似乎误解了 flexbox 的行为。

Answer 1

我对您的 CSS 进行了一些调整，使红色区域只能滚动。

CSS:

.page {
  width: 100%; height: 100vh;
  background: red;
  flex: 1;
  overflow: hidden;
}

.overflow {
  font-size: 30px;
  padding-top: 64px;
  height: 93vh;
  overflow: scroll;
}

感谢您提供plunker。为您找到解决方案很有帮助。这是 link到编辑过的插件。

希望这对您有所帮助!