Column count element overlaps to next column

Question

.main{
  column-count: 2;
}

.main .list{
  background: #ccc;
  padding: 10px;
  list-style-type: none;
}

.main .list:hover{
  background: #11e;
}

<ul class="main">
 <li class="list">list-item-1</li>
 <li class="list">list-item-2</li>
 <li class="list">list-item-3</li>
 <li class="list">list-item-4</li>
 <li class="list">list-item-5</li>
 <li class="list">list-item-6</li>
 <li class="list">list-item-7</li>
</ul>

When I hover on the list-item-4 I can see the hover color covers some section on the second column as well. How can fix it?

Yeah what Mike said, use break-inside: avoid; on the li tag – Keith Aug 28 '19 at 14:30 — Keith, Aug 28 '19 at 14:30
Sure, let me try that. Thanks :) – bhansa Aug 28 '19 at 14:30 — bhansa, Aug 28 '19 at 14:30

score 4 · Answer 1 · answered Aug 28 '19 at 15:22

You can use break-inside: avoid; to prevent the experienced behaviour.

You do not need to use vendor prefixes as usage of break-inside is already supported by more than 99% of the browsers according to caniuse.com

Please have a look at my JSFiddle to see it working.

Column count element overlaps to next column

1 Answers1