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

Question

When using column-count: 2, if there is overflow, I want a vertical scroll bar to appear, but a horizontal one appears instead. Without column-count, the vertical scroll bar appears, as expected. How can I use column-count: 2 and have the vertical scroll bar appear?

.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

Sharpshooter

Answer 1

The reason for that behaviour ist that you are restricting the size of that element with a fixed width and height. To get what you expect, put a wrapper element around it and move the width and height settings to this wrapper. Then you'll get the desired scolling behaviour:

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

The complete solution in a fiddle: https://jsfiddle.net/jgLxc2fu/3/

Valero

I ran across this same solution earlier this morning. Boy, it sure feels like a hack to me. Not blaming you. Really blaming CSS/HTML. I don't know why I can't specify the width, height, number of columns, and have the extra show via vertical scroll bar. Unfortunately, this messes around with my total width, and I have other divs above/below this one without multiple columns, and with this solution, I have to modify the width of this one to line up with the others. I appreciate your time, so I'll mark it as a solution, but I really don't like it. Again, not your fault. – Sharpshooter

Answer 2

Have you tried wrapping your columns and setting height on the wrapper with overflow control, for example: 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;
}

Ofelia

I apologize, it has been corrected. If I am understanding your question right this should work now. Instead of "twentyone" and "twentytwo" being visible only when scrolling to the right all numbers are shown by scrolling down. – Ofelia

It still doesn't seem to work for me. I don't see any scroll bars. Maybe I have a cache issue. Sorry. – Sharpshooter