无法分别添加滚动到内容和侧边栏 div

Question

我正在尝试使用 css 将滚动条分别添加到侧边栏和主要内容。我尝试向两个 div 容器添加溢出变量，但它正在将滚动添加到整个页面，这对于侧边栏和主要内容都很常见。侧边栏和主要内容使用 flex 排成一行。

注意：我对 SCSS/CSS 及其 react 应用非常陌生，我正在尝试添加一些样式。

代码沙盒：https://g0mbs.csb.app/

Answer 1

元素.main-content-with-side-bar .main-side-bar 需要一个height 集合。

IE：

.main-content-with-side-bar .main-side-bar {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    overflow-y: scroll;
    position: relative;
    height: 950px;
}

如果您通过px 不知道它需要的确切高度，您可以使用calc() IE height:calc(100% - 300px); 或者您可以在页面加载后使用 React/JavaScript/jQuery 等动态设置高度.

Answer 2

溢出仅在内容超过某个点时才起作用，在这种情况下必须强制使用高度。

您可以为这些 css 类添加以下属性：

.main-content-with-side-bar .padded-side-bar {
    ...
    height: calc(100vh - 42px);
    overflow: auto;
}

.main-content-with-side-bar .padded-main-content {
    ...
    height: calc(100vh - 42px);
    overflow: auto;
}

或者如果您使用的是 SCSS：

.main-content-with-side-bar {
    .padded-side-bar {
        ...
        height: calc(100vh - 42px);
        overflow: auto;
    }
    .padded-main-content {
        ...
        height: calc(100vh - 42px);
        overflow: auto;
    }
}

这当然应该做的工作。

编辑：将高度更新为height: calc(100vh - 42px);，其中42px 是标题的高度。