div中div的div可滚动，溢出

Question

我有一个React应用程序，并且有一些CSS问题稍微有点问题。

我的观点分为两部分。但这两个部分是一个更大的组成部分。左侧部分显示一些联系人，右侧则显示这些联系人的详细信息。现在我想让左侧部分像列表一样可滚动，但右侧部分只是保持固定在它的位置上。此外，左侧部分的高度应始终保持与当前屏幕尺寸一样高。我使用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;
}

为了更好的解释。类列为-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;
}
.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>