盒子内的列溢出不起作用答案

【问题标题】：Overflow of columns inside box not working盒子内的列溢出不起作用
【发布时间】：2019-06-21 09:40:32
【问题描述】：

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

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

这是问题的代码：

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

我希望列包含在父框内，并且当下一列流过包含框时，该列可以看到滚动条。

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

【问题讨论】：

问题需要主要是自包含的，以便外部链接的破坏或修改不会影响问题的可读性，因此请在其中提供minimal reproducible example。

标签： html css overflow multiple-columns bulma

【解决方案1】：

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

看到这个fiddle

【讨论】：

【解决方案2】：

为parent-main 和absolute 定位relative 为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>

【讨论】：

谢谢，但不是我想要的。我正在尝试为每列创建两个单独的溢出滚动条。
@jrichie911 请检查更新的答案。如果对您有帮助，请点赞并接受我的回答。

【解决方案3】：

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

所以你可以做两件事

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

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

【讨论】：