react-big-calendar 的 Flexbox 容器破坏了 UI

Question

这里是代码框单击在新窗口中打开以进入全屏模式：

https://codesandbox.io/s/restless-sun-sen7m?file=/src/App.js

问题：当 HTML 层次结构中有更高的 display:flex 容器时，react-big-calendar 不会尝试适应页面并破坏 UI。 您可以删除 .appWrapper 类的 display:flex 属性以查看它应该如何正常工作。

PS 为 .custom-calendar 类设置最大宽度（以像素为单位）不是一个选项，因为这样会失去真正的响应能力（需要支持移动屏幕）。

Answer 1

文档站点在Getting Started 部分中特别声明：

还要确保日历的容器元素具有高度，或者 日历将不可见

将日历放在它自己的容器中，并设置它的高度。在内部，日历显示使用 flexbox 来布置其内容。