html - 使 div in div in div 可滚动并溢出

Question

我有一个 React 应用程序，并且在一些 CSS 方面遇到了一个稍微大一点的问题。

我有一个 View 分为两部分。但这两个部分位于一个更大的组件中。左侧部分显示一些联系人，右侧我想显示这些联系人的详细信息。现在我想让左边的部分像列表一样可滚动，但右边的部分只是固定在它的位置上。此外，左侧部分的高度应始终保持与当前屏幕尺寸一样高。我正在使用 Bulma CSS作为我的基础 CSS 框架。

这是我的 HTML:

<div class="pane main-content" id="mainPane">
    <div class="contacts-view">
        <h1 class="title">My Title</h1>
        <div class="">Other Stuff</div>
        <div class="columns">
            <div class="column is-3">
               <div class="columns is-multiline">
                   <div class="column"></div>
                   <div class="column"></div>
                   <div class="column"></div>
                </div>
            </div>
            <div class="column is-9"></div>
        </div>
    </div>
</div>

这是它的外观的快速草图:

当前相关的 CSS:

.main-content {
    background-color: #fff;
    padding: 20px;
}
.pane {
    position: relative;
    overflow-y: auto;
    flex: 1;
}

.columns {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    margin-top: -0.75rem;
}

.column {
    display: block;
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    padding: 0.75rem;
}

为了更好的解释。具有 column is-3 类的组件应该是可滚动的，但所有其他部分应该保持固定，不能滚动。我试过:

.is-3
    overflow:hidden;
    overflow-y:scroll;

但我发现我必须设置 is-3 的高度，否则我的屏幕只会扩展到底部。但我无法为其设置固定高度，因为我的屏幕尺寸是动态的并且取决于 #mainPane 的尺寸。但我也不能将其设置为 100%，因为这样屏幕也会在底部展开。你对我如何用 CSS 解决这个问题有什么建议吗？

提前致谢:)

Answer 1

您可以使用 flexbox 布局。

jsFiddle

body {
  margin: 0;
}
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  background: lightblue;
}
.content {
  flex: 1;
  display: flex;
  min-height: 0; /*ADDED 2021*/
}
.sidebar {
  background: lightgreen;
  overflow: auto;
}
.main {
  flex: 1;
  background: pink;
  overflow: auto;
}

<div class="container">
  <div class="header">header</div>
  <div class="content">
    <div class="sidebar">
      <div style="height:200vh;">sidebar</div>
    </div>
    <div class="main">
      <div style="height:200vh;">main</div>
    </div>
  </div>
</div>