fullcalendar高度不考虑周围的容器

Question

我有一个vue.js项目，我正在整合vue-fullcalendar，我遇到了.fc-scroller fc-time-grid-container高度设置超出周围容器高度的问题。

我从fullcalendar.io借用了一个codepen示例来重新创建这种情况。我构建了App.vue文件，尽可能接近我的实际应用程序：https://codesandbox.io/s/p3418kmo7

当您单击“在新窗口中打开”时，似乎可滚动区域的高度被设置为一个值，该值不考虑它不是页面上唯一的事实。我已尝试设置fullcalendar.io属性height和contentHeight，而不会对整体行为进行任何更改。当您将Chrome的html编辑器中的高度属性<div class="fc-scroller fc-time-grid-container" style="overflow-x: hidden; overflow-y: scroll; height: 879px;">强制为小于主容器的值（在我的情况下为500px工作）时，可滚动区域会缩小并放入主容器中，从而删除其他滚动条。

我不确定在这里做什么，如何控制可滚动区域的计算高度，以便主容器不会溢出页面？

Answer 1

经过一些调试后，我能够找出属性contentHeight＆amp;如上所述，将height传递给视图特定配置时，不会尊重'auto'。将它们添加到全局配置＆amp;在我的案例中将它们设置为<full-calendar>但是能够独立处理每个视图会很好。

使用<div style='overflow-y: auto; max-height: calc(100vh-150px);">...包装FirstOrDefault()模板足以解决我的问题。如果默认的aspectRatio计算考虑了诸如导航栏高度之类的事情，那将是很好的。

以下是演示：https://codesandbox.io/s/mjz32jnoop