IE11 CSS Column Bug

Question:

Hello, there is a bug with displaying columns using the columns / column-width property. The bottom line is that the first element of the second and subsequent columns will climb into the previous column in IE11 (most likely in 10 the same thing):

.test {
 columns: 4; 
}

.test > a {
  display: block;
}

.test > a:hover {
  background-color: red;
}
<div class="test">
  <a href="" >1</a>
  <a href="" >2</a>
  <a href="" >3</a>
  <a href="" >4</a>
  <a href="" >5</a>
  <a href="" >6</a>
  <a href="" >7</a>
</div>

https://jsfiddle.net/vav84qb4/1/

Maybe someone knows how to fix this bug, preferably without js and third-party libraries?

Answer:

.test {
  columns: 4; 
}

.test > a {
  display: block;
  page-break-inside: avoid;
  break-inside: avoid;
}

.test > a:hover {
  background-color: red;
}
<div class="test">
  <a href="" >1</a>
  <a href="" >2</a>
  <a href="" >3</a>
  <a href="" >4</a>
  <a href="" >5</a>
  <a href="" >6</a>
  <a href="" >7</a>
</div>
Scroll to Top