Html 框内的列溢出不工作

我使用的是Chrome，我不能让这两列在框内的滚动条溢出。相反，它们会流过盒子

我尝试过在每个级别的所有不同元素上设置overflow:auto/scroll属性，但似乎没有任何效果

以下是该问题的代码笔：

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

---

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

Add

overflow-y:scroll到
.box
而不是
。边栏列表

请参见此
使位置
相对
用于
父主
和
绝对
用于
子设置
元素。应用
溢出：自动；高度：100%
到要溢出的
子元素

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

/*child*/
    .settings {
      overflow: auto;
      height: 100%;
      width: 100%
    }


.main{
位置：相对位置；
宽度：100%；
高度：400px
}
.设置{
溢出：自动；
身高：100%；
宽度：100%
}

测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
测试
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
一件事
1.45
实际上
。侧栏列表
未获得任何计算的高度值

所以你可以做两件事

添加
overflow-y:auto.box


添加
最大高度：400px在
侧栏列表中

谢谢，但不完全是我想要的。我正在尝试为每列创建两个单独的溢出滚动条。@jrichie911请检查更新的答案。如果我的回答对你有帮助，请投票并接受我的回答。问题需要基本上是独立的，这样外部链接的中断或修改不会影响问题的可读性，所以也请提供内部链接。
/*parent*/
    .main {
      position: relative;
      width: 100%;
      height: 400px
    }

/*child*/
    .settings {
      overflow: auto;
      height: 100%;
      width: 100%
    }

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