框内的列溢出不起作用

Question

我正在使用Chrome，我无法让这两列溢出框内的滚动条。相反，它们流过盒子。

我尝试过弄乱高度，设置溢出：每个级别的所有不同元素上的自动/滚动属性，似乎没有任何效果。

这是该问题的代码笔：

https://codepen.io/anon/pen/vqxOBV

.sidebar-list {
  overflow-y: auto;
}

我希望列包含在父框中，并且当下一个列流过包含框时，该列的滚动条可见。

编辑：我正在尝试创建两个单独的滚动条，一个用于左列，一个用于右列。

Answer 1

将overflow-y: scroll;添加到.box而不是.sidebar-list

看到这个小提琴

Answer 2

为parent-main设置位置relative，为child-settings元素设置absolute。将overflow: auto;height:100%应用于要溢出的child元素。

/*parent*/
    .main {
      position: relative;
      width: 100%;
      height: 400px
    }
/*child*/
    .settings {
      overflow: auto;
      height: 100%;
      width: 100%
    }

.main {
  position: relative;
  width: 100%;
  height: 400px
}
.settings {
  overflow: auto;
  height: 100%;
  width: 100%
}

<div class="main">
  <div class="container settings" style="position: absolute;">
    <div class="box no-box-small-mobile">
      <div class="column">
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
        <h1>test</h1>
      </div>
    </div>
  </div>
</div>
<div class="main">
  <div class="container settings" style="position: absolute;">
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
    <div class="item">
      <div class="label">A thing</div>
      <div class="value">1.45</div>
    </div>
  </div>
</div>

Answer 3

实际上.sidebar-list没有得到任何计算的高度值。

所以你可以做两件事

1. 使用.box添加overflow-y: auto; <div class="box no-box-small-mobile" style="max-height: 400px; overflow-y: auto;">
2. 在.sidebar-list中添加max-height: 400px;

.sidebar-list {
  overflow-y: auto;
  max-height: 400px;
}