Clever Geek Handbook

Scrollable container with columns and overflow-y: auto

I want to create a scrollable container that has its contents laid out in columns. I find that I cannot use the property column-count

together with overflow-y: auto

and fixed size on the same element. Content always overflows horizontally, making more columns than specified in column-count

.

HTML:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>   
</ul>

<ul class="with-columns">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>  
</ul>

CSS

li {
  list-style-type: none;
  padding: 5px;
  background: coral;
  margin: 2px;
  width: 80%;
  display: inline-block;
  height: 60px;
}

li:nth-child(2n+3) {
  height: 90px; /* simulate variable height content  items */
}

ul {
  background: lightblue;
  position: relative;
  width: 300px;
  height: 300px;
  overflow-y: auto;
}

ul.with-columns {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  column-count: 2;
  column-gap: 0;
}

How to make it ul.with-columns

vertically scrollable without wrapping in an additional element?

JSBin: http://jsbin.com/gegawidayi/4/edit

+3


source to share


1 answer


I think you can use max-height instead of height on ul instead.

ul {
    background: lightblue;
    position: relative;
    width: 300px;
    max-height: 300px;
    overflow-y: auto;
}


This should give you what you are looking for.

+2


source






More articles:


All Articles