每当使用 CSS / JSS 缩小浏览器大小和数据溢出时，在 HTML 的 div 标签上启用滚动条

Question

我使用 HTML 的 DIV 标签创建了一个菜单选项，如下图所示 link：- https://ibb.co/4F2YmdP

在整个浏览器屏幕中，我的垂直菜单高度应始终为 100% 或自动。只有当我减小浏览器大小并且我的内容溢出浏览器屏幕时，才应启用滚动条。

我不寻找的是：-

@media (min-width: pixel value) and (max-width: pixel value)
{
    height: "browser size";
    overflow: "scroll";
}

这是因为我的菜单选项数量总是会改变。如果我硬编码浏览器的最小宽度和最大宽度大小，那么我将必须始终获取菜单的动态高度，然后必须将它与浏览器大小进行比较，以便找出我的菜单数据何时得到溢出。

即使内容在较小的浏览器屏幕中不会溢出，我也不会只想要滚动条。

我在我的代码中看到了什么：-

当我将菜单的值硬编码为较小的百分比时，这样我的内容就会在完全打开的浏览器中溢出，然后 启用滚动（即它正在工作）使用我下面提到的代码。
当我将高度的值硬编码为更大的百分比时，这样我的内容就不会在完全打开的浏览器中溢出，然后滚动禁用使用我下面提到的代码。当我减小浏览器的屏幕尺寸时，它也 不会启用 。

点击"run"按钮检查输出。

我做了什么：-

在我的主要 div 周围添加了一个包装器，以创建父子关系，如 - Only Enable Scrollbar on Body And Disable on Other Div with CSS HTML 中所述（也包含在我的代码中）
添加了 CSS "position: relative;"，如少数 SO 答案中所述，但对我帮助不大。

我的原始用例基本上是在 React.js 使用打字稿和 JSS 制作的菜单组件上。但是，如果这在 CSS 中有效，我可以将相同的更改合并到 JSS 中。

我已经在 JSS 中上传了相同的代码，网址为 - https://codesandbox.io/s/keen-smoke-ygdxy

如果你对 react 和 jss 很满意，你可以使用上面的 link 来回答同样的问题。

期望只是在浏览器尺寸减小时有一个 y 滚动条，并且只有当浏览器尺寸减小使得菜单选项溢出可见屏幕时。

Answer 1

这是一个 CSS 问题。为了实现可滚动属性.

，您必须以像素为单位给出元素的高度（em，rem 用于响应）

但是您可以使用 calc 方法巧妙地给出高度。例如：

@media (min-width: pixel value) and (max-width: pixel value)
{
    height: calc(100vh - 50px);
    overflow: "scroll";
}

注意：vh：垂直高度，可在任何浏览器中使用

Answer 2

添加这个你的index.js

 wrapper: {
    width: "200px",
    height:"90vh",
    overflow:"auto",
  },

Enable scrollbar on div tag of HTML whenever browser size is reduced & data overflows using CSS / JSS