使用列数时滚动条错误 (CSS/HTML)

Question

当使用column-count: 2时，如果溢出，我想出现一个垂直滚动条，但出现了一个水平滚动条。如果没有列数，垂直滚动条会按预期出现。如何使用 column-count: 2 并显示垂直滚动条？

.searchCriteriaPanel {
    border-radius: 0 0 5px 5px;
    width: 300px;
    height: 200px;
    background-color: lightgrey;
    padding: 10px;
    overflow-y: auto;
    column-count: 2;
}

<div id="MarketContent" class="searchCriteriaPanel">
    <label><input type="checkbox">one</label><br />
    <label><input type="checkbox">two</label><br />
    <label><input type="checkbox">three</label><br />
    <label><input type="checkbox">four</label><br />
    <label><input type="checkbox">five</label><br />
    <label><input type="checkbox">six</label><br />
    <label><input type="checkbox">seven</label><br />
    <label><input type="checkbox">eight</label><br />
    <label><input type="checkbox">nine</label><br />
    <label><input type="checkbox">ten</label><br />
    <label><input type="checkbox">eleven</label><br />
    <label><input type="checkbox">twelve</label><br />
    <label><input type="checkbox">thirteen</label><br />
    <label><input type="checkbox">fourteen</label><br />
    <label><input type="checkbox">fifteen</label><br />
    <label><input type="checkbox">sixteen</label><br />
    <label><input type="checkbox">seventeen</label><br />
    <label><input type="checkbox">eighteen</label><br />
    <label><input type="checkbox">nineteen</label><br />
    <label><input type="checkbox">twenty</label><br />
    <label><input type="checkbox">twentyone</label><br />
    <label><input type="checkbox">twentytwo</label>
</div>

JS-Fiddle

Answer 1

您是否尝试过包装您的列并在带有溢出控制的包装器上设置高度，例如： https://codepen.io/anon/pen/YrGPNM

.searchCriteriaPanel {
    border-radius: 0 0 5px 5px;
    width: 500px;
    background-color: lightgrey;
    padding: 10px;
    column-count: 2;
}
.cont {
  height: 100px;
  overflow-y: auto;
}

Answer 2

该行为的原因是您使用 fixed width 和 height 限制该元素的大小。为了得到你期望的结果，在它周围放置一个包装器元素并将宽度和高度设置移动到这个包装器。然后你会得到想要的 scolling 行为：

.wrapper {
      width: 300px;
      height: 200px;
      overflow: auto;
}
.searchCriteriaPanel {
      border-radius: 0 0 5px 5px;
      background-color: lightgrey;
      padding: 10px;
      column-count: 2;
}

fiddle中的完整解决方案：https://jsfiddle.net/jgLxc2fu/3/

使用列数时滚动条错误 (CSS/HTML)

Wrong scroll bar when using column-count (CSS/HTML)

html

css

css-multicolumn-layout