Question

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

我试图弄乱高度，设置溢出：在每个级别上所有不同元素上的auto / scroll属性，似乎没有任何作用。

这是该问题的代码笔：

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

我希望这些列包含在父框中，并且当下一个列通过包含框时，该列会显示一个滚动条。

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

Answer 1

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

查看此fiddle

Answer 2

为relative设置位置parent-main，为absolute设置位置child-settings。将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未获得任何计算出的高度值。

所以你可以做两件事

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

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

框内的列溢出不起作用

3 个答案: